/* ZELEN Pay Cloudflare Pages Build — extracted from Step 1305. */ /* ===== BEGIN STYLE BLOCK: pg-step334-instore-return-bypass-css ===== */ html.pg-instore-returning #pg-mobile-auth-entry{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; display:none !important; } /* ========================================================= STEP 1023 — MOBILE ONLY: REWARDS GATEWAY FULL-WIDTH IPHONE FIX Goal: - Fix iPhone overlap where #pg-rewards-gateway-usd compresses over “AVAILABLE REWARDS” - Expand #pg-rewards-gateway to full available mobile width first - Keep USD value locked on the same row, right aligned, and non-shrinking - Keep title/tagline clean with no collision or wrapping - Preserve existing tap behavior, rewards sync, icon, glow, and desktop/tablet lock Scope: ONLY #pg-rewards-gateway on mobile (<=520px) ========================================================= */ @media (max-width: 520px){ #pg-rewards-gateway.pg-rewards-gateway{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 10px 0 18px 0 !important; padding: 10px 13px 10px 14px !important; display: grid !important; grid-template-columns: 38px minmax(0, 1fr) max-content !important; grid-template-rows: 18px 17px !important; column-gap: 10px !important; row-gap: 2px !important; align-items: center !important; justify-content: stretch !important; box-sizing: border-box !important; } #pg-rewards-gateway .pg-rg-left{ display: contents !important; min-width: 0 !important; } #pg-rewards-gateway .pg-rg-copy{ grid-column: 2 !important; grid-row: 1 / 3 !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-rows: 18px 17px !important; gap: 2px !important; align-items: center !important; overflow: hidden !important; } #pg-rewards-gateway .pg-rg-title{ grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; padding-right: 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; text-align: left !important; } #pg-rewards-gateway .pg-rg-sub{ grid-row: 2 !important; min-width: 0 !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; text-align: left !important; } #pg-rewards-gateway #pg-rewards-gateway-usd.pg-rg-amount, #pg-rewards-gateway .pg-rg-amount{ grid-column: 3 !important; grid-row: 1 !important; align-self: center !important; justify-self: end !important; flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; max-width: none !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; text-align: right !important; } } /* ===== END STYLE BLOCK: pg-step334-instore-return-bypass-css ===== */ /* ===== BEGIN STYLE BLOCK: pg-step329-mobile-auth-css ===== */ ... /* ===== END STYLE BLOCK: pg-step329-mobile-auth-css ===== */ /* ===== BEGIN STYLE BLOCK: pg-step1300-mobile-auth-css ===== */ #pg-mobile-auth-entry{ display:none; } @media (max-width: 520px){ #pg-mobile-auth-entry{ --zp-bg:#050607; --zp-panel:#0a0d10; --zp-surface:#0a0d10; --zp-surface-2:#0f1518; --zp-primary:#00e5c2; --zp-secondary:#11b5d9; --zp-primary-rgb:0,229,194; --zp-secondary-rgb:17,181,217; --zp-text:#ffffff; --zp-text-soft:rgba(255,255,255,0.72); --zp-text-muted:rgba(255,255,255,0.50); --zp-line:rgba(255,255,255,0.10); position:fixed; inset:0; z-index:2147482000; display:block; width:100vw; height:100vh; height:100dvh; overflow:hidden; color:var(--zp-text); background: radial-gradient(700px 520px at 50% 102%, rgba(var(--zp-primary-rgb),0.26), rgba(0,0,0,0.00) 58%), radial-gradient(520px 420px at 22% 8%, rgba(var(--zp-secondary-rgb),0.12), rgba(0,0,0,0.00) 62%), radial-gradient(460px 360px at 86% 18%, rgba(255,255,255,0.055), rgba(0,0,0,0.00) 60%), linear-gradient(180deg, #07090b 0%, #030405 100%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; touch-action: pan-y; isolation:isolate; } #pg-mobile-auth-entry.pg-auth-hidden{ display:none !important; } #pg-mobile-auth-entry::before{ content:""; position:absolute; inset:-24%; z-index:0; pointer-events:none; background: radial-gradient(circle at 50% 78%, rgba(var(--zp-primary-rgb),0.18), rgba(var(--zp-primary-rgb),0.00) 30%), conic-gradient(from 230deg at 50% 76%, rgba(var(--zp-primary-rgb),0.00) 0deg, rgba(var(--zp-primary-rgb),0.16) 58deg, rgba(var(--zp-secondary-rgb),0.08) 112deg, rgba(var(--zp-primary-rgb),0.00) 176deg, rgba(255,255,255,0.035) 250deg, rgba(var(--zp-primary-rgb),0.00) 360deg); filter:blur(28px); opacity:0.72; animation:pgZpAuthAurora 18s linear infinite; transform-origin:50% 72%; } #pg-mobile-auth-entry::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00) 18%), radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,0.16), transparent 100%), radial-gradient(1px 1px at 74% 18%, rgba(255,255,255,0.11), transparent 100%), radial-gradient(1px 1px at 88% 54%, rgba(var(--zp-primary-rgb),0.18), transparent 100%); opacity:0.72; } @keyframes pgZpAuthAurora{ to{ transform:rotate(360deg); } } #pg-mobile-auth-entry .pg-zpa-shell{ position:relative; z-index:1; width:100%; height:100%; min-height:100%; display:grid; grid-template-rows:auto 1fr auto; padding: max(18px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom)) 20px; box-sizing:border-box; overflow:hidden; } #pg-mobile-auth-entry .pg-zpa-top{ height:52px; display:flex; align-items:center; justify-content:center; position:relative; flex:0 0 auto; } #pg-mobile-auth-entry .pg-zpa-brand{ display:inline-flex; align-items:baseline; justify-content:center; gap:9px; line-height:1; white-space:nowrap; user-select:none; filter:drop-shadow(0 16px 28px rgba(0,0,0,0.48)); } #pg-mobile-auth-entry .pg-zpa-brand-zelen{ color:#ffffff; font-size:17px; font-weight:500; letter-spacing:0.58em; text-transform:uppercase; padding-left:0.58em; } #pg-mobile-auth-entry .pg-zpa-brand-pay{ color:rgb(var(--zp-primary-rgb)); font-size:18px; font-weight:500; letter-spacing:0.01em; text-shadow:0 0 18px rgba(var(--zp-primary-rgb),0.34); } #pg-mobile-auth-entry .pg-zpa-stage{ position:relative; width:100%; height:100%; min-height:0; display:grid; place-items:center; overflow:hidden; } #pg-mobile-auth-entry .pg-zpa-screen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 0 12px; box-sizing:border-box; opacity:0; transform:translateX(24px) scale(0.985); pointer-events:none; transition: opacity 340ms cubic-bezier(.22,.92,.18,1), transform 420ms cubic-bezier(.22,.92,.18,1), filter 340ms ease; filter:blur(4px); } #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="7"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="8"]{ opacity:1; transform:translateX(0) scale(1); pointer-events:auto; filter:blur(0); } /* Screen transition direction map — Phase 5 expanded to 10 screens */ #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="7"]{ opacity:0; transform:translateX(-24px) scale(0.985); } #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="7"], #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="8"], #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="7"], #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="8"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="7"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="8"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="7"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="8"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="7"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="8"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="7"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="8"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="8"]{ opacity:0; transform:translateX(24px) scale(0.985); } #pg-mobile-auth-entry .pg-zpa-hero{ width:min(272px, 76vw); height:min(272px, 76vw); position:relative; display:grid; place-items:center; margin:-6px auto 28px; border-radius:999px; } #pg-mobile-auth-entry .pg-zpa-hero::before{ content:""; position:absolute; inset:16%; border-radius:999px; background: radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.22), rgba(var(--zp-primary-rgb),0.06) 40%, rgba(0,0,0,0.00) 72%); box-shadow: 0 0 0 1px rgba(var(--zp-primary-rgb),0.16), 0 0 44px rgba(var(--zp-primary-rgb),0.24), inset 0 0 34px rgba(var(--zp-primary-rgb),0.10); filter:blur(0.2px); } #pg-mobile-auth-entry .pg-zpa-growth-orb{ position:relative; width:184px; height:184px; border-radius:999px; display:grid; place-items:center; background: radial-gradient(circle at 36% 28%, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 28%), radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.18), rgba(0,0,0,0.28) 68%), linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.16)); border:1px solid rgba(var(--zp-primary-rgb),0.38); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 32px rgba(var(--zp-primary-rgb),0.30), 0 34px 72px rgba(0,0,0,0.48); overflow:hidden; } #pg-mobile-auth-entry .pg-zpa-growth-orb::before{ content:""; position:absolute; inset:22px; border-radius:999px; border:1px solid rgba(var(--zp-primary-rgb),0.30); box-shadow:0 0 28px rgba(var(--zp-primary-rgb),0.18) inset; opacity:0.92; } #pg-mobile-auth-entry .pg-zpa-growth-orb::after{ content:""; position:absolute; width:148%; height:148%; border-radius:999px; background:conic-gradient(from 210deg, rgba(var(--zp-primary-rgb),0.00), rgba(var(--zp-primary-rgb),0.28), rgba(var(--zp-secondary-rgb),0.12), rgba(var(--zp-primary-rgb),0.00) 62%); filter:blur(10px); opacity:0.72; animation:pgZpOrbSpin 14s linear infinite; } @keyframes pgZpOrbSpin{ to{ transform:rotate(360deg); } } #pg-mobile-auth-entry .pg-zpa-leaf-mark{ position:relative; z-index:2; width:68px; height:68px; filter:drop-shadow(0 0 18px rgba(var(--zp-primary-rgb),0.38)); } #pg-mobile-auth-entry .pg-zpa-leaf-mark svg{ width:100%; height:100%; display:block; } #pg-mobile-auth-entry .pg-zpa-horizon{ position:absolute; left:-14%; right:-14%; bottom:18px; height:84px; border-radius:50% 50% 0 0; background: radial-gradient(80% 100% at 50% 100%, rgba(var(--zp-primary-rgb),0.38), rgba(var(--zp-primary-rgb),0.00) 54%), linear-gradient(180deg, rgba(var(--zp-primary-rgb),0.00), rgba(var(--zp-primary-rgb),0.18)); border-top:1px solid rgba(var(--zp-primary-rgb),0.58); box-shadow:0 -12px 42px rgba(var(--zp-primary-rgb),0.22); opacity:0.68; filter:blur(0.1px); } #pg-mobile-auth-entry .pg-zpa-copy{ width:100%; text-align:center; margin:0 auto; } #pg-mobile-auth-entry .pg-zpa-kicker{ margin:0 0 10px; color:rgb(var(--zp-primary-rgb)); font-size:11px; line-height:1; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; text-shadow:0 0 16px rgba(var(--zp-primary-rgb),0.28); } #pg-mobile-auth-entry .pg-zpa-title{ margin:0; color:#ffffff; font-size:25px; line-height:1.12; letter-spacing:-0.035em; font-weight:650; text-align:center; } #pg-mobile-auth-entry .pg-zpa-sub{ margin:14px auto 0; max-width:292px; color:var(--zp-text-soft); font-size:14px; line-height:1.55; font-weight:430; text-align:center; } #pg-mobile-auth-entry .pg-zpa-actions{ width:100%; display:flex; flex-direction:column; gap:12px; margin-top:30px; } #pg-mobile-auth-entry .pg-zpa-google{ width:100%; height:54px; border:1px solid rgba(var(--zp-primary-rgb),0.46); border-radius:14px; display:flex; align-items:center; justify-content:center; gap:11px; color:#ffffff; background: radial-gradient(120% 160% at 18% 8%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 42%), linear-gradient(180deg, rgba(var(--zp-primary-rgb),0.18), rgba(var(--zp-secondary-rgb),0.10) 52%, rgba(255,255,255,0.035)); box-shadow: 0 0 0 1px rgba(255,255,255,0.055) inset, 0 18px 38px rgba(0,0,0,0.46), 0 0 28px rgba(var(--zp-primary-rgb),0.18); font-size:14px; font-weight:720; letter-spacing:-0.01em; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 120ms ease, filter 180ms ease, box-shadow 180ms ease; } #pg-mobile-auth-entry .pg-zpa-google:active{ transform:scale(0.988); filter:brightness(1.06); } #pg-mobile-auth-entry .pg-zpa-google-icon{ width:18px; height:18px; border-radius:999px; background:#ffffff; display:grid; place-items:center; font-size:12px; font-weight:900; color:#0a0d10; box-shadow:0 0 14px rgba(255,255,255,0.18); } #pg-mobile-auth-entry .pg-zpa-login{ border:0; background:transparent; color:rgba(var(--zp-primary-rgb),0.95); font-size:13px; font-weight:650; text-decoration:none; cursor:pointer; } #pg-mobile-auth-entry .pg-zpa-footnote{ margin-top:18px; color:rgba(255,255,255,0.42); font-size:11px; line-height:1.45; text-align:center; } #pg-mobile-auth-entry .pg-zpa-loader-wrap{ width:min(250px, 70vw); height:min(250px, 70vw); position:relative; display:grid; place-items:center; margin:-18px auto 34px; } #pg-mobile-auth-entry .pg-zpa-loader-core{ position:relative; width:150px; height:150px; border-radius:999px; display:grid; place-items:center; background: radial-gradient(circle at 38% 28%, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 34%), radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.22), rgba(0,0,0,0.32) 70%); border:1px solid rgba(var(--zp-primary-rgb),0.46); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 42px rgba(var(--zp-primary-rgb),0.35), 0 30px 68px rgba(0,0,0,0.52); overflow:hidden; } #pg-mobile-auth-entry .pg-zpa-loader-core::before, #pg-mobile-auth-entry .pg-zpa-loader-core::after{ content:""; position:absolute; inset:10px; border-radius:999px; border:1px solid rgba(var(--zp-primary-rgb),0.22); animation:pgZpLoaderPulse 2.8s ease-in-out infinite; } #pg-mobile-auth-entry .pg-zpa-loader-core::after{ inset:28px; animation-delay:0.55s; opacity:0.7; } @keyframes pgZpLoaderPulse{ 0%,100%{ transform:scale(0.96); opacity:0.36; } 50%{ transform:scale(1.05); opacity:0.82; } } #pg-mobile-auth-entry .pg-zpa-loader-ring{ position:absolute; inset:-28px; border-radius:999px; background:conic-gradient(from 0deg, rgba(var(--zp-primary-rgb),0.00), rgba(var(--zp-primary-rgb),0.58), rgba(var(--zp-secondary-rgb),0.28), rgba(var(--zp-primary-rgb),0.00) 62%); filter:blur(11px); opacity:0.74; animation:pgZpLoaderSpin 1.8s linear infinite; } @keyframes pgZpLoaderSpin{ to{ transform:rotate(360deg); } } #pg-mobile-auth-entry .pg-zpa-user-mark{ position:relative; z-index:2; width:44px; height:44px; color:rgb(var(--zp-primary-rgb)); filter:drop-shadow(0 0 16px rgba(var(--zp-primary-rgb),0.38)); } #pg-mobile-auth-entry .pg-zpa-user-mark svg{ width:100%; height:100%; display:block; } #pg-mobile-auth-entry .pg-zpa-progress{ width:min(260px, 74vw); height:3px; border-radius:999px; background:rgba(255,255,255,0.10); margin:28px auto 0; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,0.04) inset; } #pg-mobile-auth-entry .pg-zpa-progress-fill{ height:100%; width:36%; border-radius:999px; background:linear-gradient(90deg, rgba(var(--zp-primary-rgb),0.95), rgba(var(--zp-secondary-rgb),0.86)); box-shadow:0 0 18px rgba(var(--zp-primary-rgb),0.42); animation:pgZpProgress 2.25s ease-in-out infinite; } @keyframes pgZpProgress{ 0%{ transform:translateX(-105%); width:36%; } 50%{ width:58%; } 100%{ transform:translateX(292%); width:36%; } } #pg-mobile-auth-entry .pg-zpa-bottom{ min-height:34px; display:flex; align-items:flex-end; justify-content:center; color:rgba(255,255,255,0.34); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; text-align:center; pointer-events:none; user-select:none; } #pg-mobile-auth-entry .pg-zpa-dots{ position:absolute; left:50%; bottom:calc(max(18px, env(safe-area-inset-bottom)) + 34px); transform:translateX(-50%); display:flex; gap:8px; z-index:4; pointer-events:none; } #pg-mobile-auth-entry .pg-zpa-dot{ width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,0.20); transition:width 220ms ease, background 220ms ease, box-shadow 220ms ease; } #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-dot:nth-child(1), #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-dot:nth-child(2), #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-dot:nth-child(3), #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-dot:nth-child(4), #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-dot:nth-child(5), #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-dot:nth-child(6), #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-dot:nth-child(7), #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-dot:nth-child(8){ width:18px; background:rgba(var(--zp-primary-rgb),0.95); box-shadow:0 0 12px rgba(var(--zp-primary-rgb),0.36); } /* ========================================================= STEP 1300 — SCREENS 03–04 AUTH FORM + OTP KEYPAD Scope: isolated to #pg-mobile-auth-entry only. Visual DNA mirrors the gateway rewards keypad without sharing selectors. ========================================================= */ #pg-mobile-auth-entry .pg-zpa-form-screen{ justify-content:flex-start; align-items:stretch; padding:34px 0 12px; } #pg-mobile-auth-entry .pg-zpa-form-copy{ width:100%; text-align:left; margin:0 0 20px; } #pg-mobile-auth-entry .pg-zpa-form-title{ margin:0; color:#ffffff; font-size:23px; line-height:1.18; letter-spacing:-0.035em; font-weight:620; text-align:left; } #pg-mobile-auth-entry .pg-zpa-form-sub{ margin:12px 0 0; max-width:292px; color:var(--zp-text-soft); font-size:13px; line-height:1.48; font-weight:430; text-align:left; } #pg-mobile-auth-entry .pg-zpa-field-label{ display:block; margin:22px 0 8px; color:rgba(255,255,255,0.70); font-size:11px; line-height:1; font-weight:560; letter-spacing:0.03em; } #pg-mobile-auth-entry .pg-zpa-phone-card{ height:50px; border-radius:10px; display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; padding:0 13px; color:rgba(255,255,255,0.92); background: radial-gradient(120% 160% at 16% 0%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 46%), linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022)), rgba(9,14,17,0.88); border:1px solid rgba(255,255,255,0.10); box-shadow: 0 18px 36px rgba(0,0,0,0.34), 0 0 0 1px rgba(var(--zp-primary-rgb),0.08) inset; } #pg-mobile-auth-entry .pg-zpa-flag{ display:inline-flex; align-items:center; justify-content:center; gap:5px; color:rgba(255,255,255,0.72); font-size:15px; white-space:nowrap; } #pg-mobile-auth-entry .pg-zpa-phone-value{ color:rgba(255,255,255,0.92); font-size:13px; font-weight:520; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #pg-mobile-auth-entry .pg-zpa-phone-card{ cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease, transform 100ms ease; } #pg-mobile-auth-entry .pg-zpa-phone-card:active, #pg-mobile-auth-entry .pg-zpa-phone-card.is-active{ border-color:rgba(var(--zp-primary-rgb),0.42); box-shadow: 0 18px 36px rgba(0,0,0,0.34), 0 0 0 1px rgba(var(--zp-primary-rgb),0.14) inset, 0 0 22px rgba(var(--zp-primary-rgb),0.14); filter:brightness(1.04); } #pg-mobile-auth-entry .pg-zpa-phone-card.is-empty .pg-zpa-phone-value{ color:rgba(255,255,255,0.44); font-size:13px; font-weight:520; text-shadow:none; } #pg-mobile-auth-entry .pg-zpa-phone-card.is-filled .pg-zpa-phone-value{ color:rgb(var(--zp-primary-rgb)); font-size:15px; font-weight:560; letter-spacing:0.005em; text-shadow:0 0 12px rgba(var(--zp-primary-rgb),0.28); } #pg-mobile-auth-entry .pg-zpa-phone-keypad{ margin-top:14px; } #pg-mobile-auth-entry .pg-zpa-screen-phone .pg-zpa-primary-btn{ margin-top:16px; } #pg-mobile-auth-entry .pg-zpa-screen-phone .pg-zpa-mini-note{ margin-top:12px; } #pg-mobile-auth-entry .pg-zpa-primary-btn{ width:100%; height:52px; border:0; border-radius:10px; margin-top:20px; display:flex; align-items:center; justify-content:center; color:rgba(0,18,17,0.88); background:linear-gradient(135deg, rgba(var(--zp-primary-rgb),0.98), rgba(var(--zp-secondary-rgb),0.88)); box-shadow: 0 20px 44px rgba(0,0,0,0.42), 0 0 28px rgba(var(--zp-primary-rgb),0.28), inset 0 1px 0 rgba(255,255,255,0.26); font-size:13px; font-weight:760; letter-spacing:-0.01em; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 120ms ease, filter 160ms ease; } #pg-mobile-auth-entry .pg-zpa-primary-btn:active{ transform:scale(0.988); filter:brightness(1.06); } #pg-mobile-auth-entry .pg-zpa-mini-note{ margin:14px auto 0; color:rgba(255,255,255,0.42); font-size:11px; line-height:1.35; text-align:center; } #pg-mobile-auth-entry .pg-zpa-otp-row{ display:grid; grid-template-columns:repeat(6, 1fr); gap:7px; width:100%; margin:20px 0 12px; } #pg-mobile-auth-entry .pg-zpa-otp-box{ height:43px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.92); font-size:20px; font-weight:520; background: radial-gradient(120% 130% at 28% 0%, rgba(255,255,255,0.075), rgba(255,255,255,0.00) 45%), rgba(7,11,13,0.82); border:1px solid rgba(255,255,255,0.15); box-shadow: 0 12px 24px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.035); } #pg-mobile-auth-entry .pg-zpa-otp-box.is-filled{ border-color:rgba(var(--zp-primary-rgb),0.56); box-shadow: 0 0 0 1px rgba(var(--zp-primary-rgb),0.13) inset, 0 0 18px rgba(var(--zp-primary-rgb),0.20), 0 12px 24px rgba(0,0,0,0.34); color:rgb(var(--zp-primary-rgb)); text-shadow:0 0 12px rgba(var(--zp-primary-rgb),0.34); } #pg-mobile-auth-entry .pg-zpa-resend{ color:rgba(255,255,255,0.48); font-size:11px; line-height:1.3; text-align:left; margin:0 0 15px; } #pg-mobile-auth-entry .pg-zpa-resend span{ color:rgba(var(--zp-primary-rgb),0.96); } #pg-mobile-auth-entry .pg-auth-keypad{ width:100%; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; margin-top:4px; } #pg-mobile-auth-entry .pg-auth-key{ height:52px; border:1px solid rgba(255,255,255,0.085); border-radius:8px; color:rgba(255,255,255,0.92); background: radial-gradient(120% 170% at 50% 0%, rgba(255,255,255,0.105), rgba(255,255,255,0.00) 44%), linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015) 48%, rgba(0,0,0,0.34) 100%), rgba(10,15,17,0.92); box-shadow: 0 11px 24px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.065), inset 0 -1px 0 rgba(0,0,0,0.46); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:19px; line-height:1; font-weight:500; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 90ms ease, border-color 140ms ease, box-shadow 140ms ease, filter 140ms ease; } #pg-mobile-auth-entry .pg-auth-key:active{ transform:scale(0.985) translateY(1px); border-color:rgba(var(--zp-primary-rgb),0.46); box-shadow: 0 0 20px rgba(var(--zp-primary-rgb),0.18), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.46); filter:brightness(1.08); } #pg-mobile-auth-entry .pg-auth-key small{ color:rgba(255,255,255,0.56); font-size:7px; line-height:1; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; min-height:8px; } #pg-mobile-auth-entry .pg-auth-key-zero{ grid-column:2; } #pg-mobile-auth-entry .pg-auth-key-back{ font-size:20px; color:rgba(255,255,255,0.78); } #pg-mobile-auth-entry .pg-zpa-screen-code .pg-zpa-form-copy{ margin-bottom:6px; } /* ========================================================= STEP 1300 — SCREENS 05–06 PHONE VERIFIED + SECURE ACCOUNT Scope: isolated to #pg-mobile-auth-entry only. ========================================================= */ #pg-mobile-auth-entry .pg-zpa-center-screen{ justify-content:center; align-items:center; text-align:center; padding:8px 0 12px; } #pg-mobile-auth-entry .pg-zpa-check-hero{ position:relative; width:172px; height:172px; border-radius:999px; display:grid; place-items:center; margin:-6px auto 30px; } #pg-mobile-auth-entry .pg-zpa-check-hero::before{ content:""; position:absolute; inset:32px; border-radius:999px; background: radial-gradient(circle at 36% 28%, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 34%), radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.18), rgba(0,0,0,0.32) 72%); border:1px solid rgba(var(--zp-primary-rgb),0.58); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 32px rgba(var(--zp-primary-rgb),0.34), 0 0 78px rgba(var(--zp-primary-rgb),0.16), 0 28px 62px rgba(0,0,0,0.50); } #pg-mobile-auth-entry .pg-zpa-check-hero::after{ content:""; position:absolute; inset:18px; border-radius:999px; border:1px solid rgba(var(--zp-primary-rgb),0.18); box-shadow:0 0 42px rgba(var(--zp-primary-rgb),0.14) inset; animation:pgZpVerifiedPulse 2.8s ease-in-out infinite; } @keyframes pgZpVerifiedPulse{ 0%,100%{ transform:scale(0.96); opacity:0.34; } 50%{ transform:scale(1.06); opacity:0.78; } } #pg-mobile-auth-entry .pg-zpa-check-icon{ position:relative; z-index:2; width:62px; height:62px; color:rgb(var(--zp-primary-rgb)); filter: drop-shadow(0 0 18px rgba(var(--zp-primary-rgb),0.50)) drop-shadow(0 0 42px rgba(var(--zp-primary-rgb),0.18)); } #pg-mobile-auth-entry .pg-zpa-check-icon svg{ width:100%; height:100%; display:block; } #pg-mobile-auth-entry .pg-zpa-verified-title{ margin:0; color:#ffffff; font-size:20px; line-height:1.15; letter-spacing:-0.02em; font-weight:560; text-align:center; } #pg-mobile-auth-entry .pg-zpa-verified-sub{ margin:14px auto 0; max-width:240px; color:rgba(255,255,255,0.70); font-size:12px; line-height:1.55; font-weight:420; text-align:center; } #pg-mobile-auth-entry .pg-zpa-verified-action{ position:absolute; left:0; right:0; bottom:58px; width:100%; } #pg-mobile-auth-entry .pg-zpa-secure-screen{ justify-content:flex-start; align-items:stretch; padding:54px 0 12px; } #pg-mobile-auth-entry .pg-zpa-secure-copy{ width:100%; text-align:left; margin:0 0 24px; } #pg-mobile-auth-entry .pg-zpa-secure-title{ margin:0; color:#ffffff; font-size:20px; line-height:1.2; letter-spacing:-0.025em; font-weight:560; text-align:left; } #pg-mobile-auth-entry .pg-zpa-secure-sub{ margin:14px auto 0; max-width:250px; color:rgba(255,255,255,0.68); font-size:12px; line-height:1.52; font-weight:420; text-align:center; } #pg-mobile-auth-entry .pg-zpa-security-options{ display:flex; flex-direction:column; gap:12px; width:100%; margin-top:28px; } #pg-mobile-auth-entry .pg-zpa-security-option{ width:100%; min-height:58px; border:1px solid rgba(255,255,255,0.075); border-radius:10px; display:grid; grid-template-columns:42px 1fr 18px; align-items:center; gap:10px; padding:9px 11px; color:#ffffff; background: radial-gradient(120% 180% at 16% 0%, rgba(255,255,255,0.075), rgba(255,255,255,0.00) 44%), linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 52%, rgba(0,0,0,0.28)), rgba(8,13,15,0.88); box-shadow: 0 14px 30px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.045), inset 0 0 0 1px rgba(255,255,255,0.025); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 100ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease; } #pg-mobile-auth-entry .pg-zpa-security-option:active{ transform:scale(0.988); filter:brightness(1.06); border-color:rgba(var(--zp-primary-rgb),0.38); box-shadow: 0 0 22px rgba(var(--zp-primary-rgb),0.16), 0 14px 30px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06); } #pg-mobile-auth-entry .pg-zpa-security-icon{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:rgb(var(--zp-primary-rgb)); background:rgba(var(--zp-primary-rgb),0.07); box-shadow: 0 0 18px rgba(var(--zp-primary-rgb),0.14), inset 0 0 0 1px rgba(var(--zp-primary-rgb),0.10); } #pg-mobile-auth-entry .pg-zpa-security-icon svg{ width:22px; height:22px; display:block; filter:drop-shadow(0 0 10px rgba(var(--zp-primary-rgb),0.34)); } #pg-mobile-auth-entry .pg-zpa-security-main{ min-width:0; text-align:left; } #pg-mobile-auth-entry .pg-zpa-security-label{ display:block; color:rgba(255,255,255,0.94); font-size:12px; line-height:1.2; font-weight:560; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #pg-mobile-auth-entry .pg-zpa-security-note{ display:block; margin-top:3px; color:rgba(255,255,255,0.54); font-size:10px; line-height:1.2; font-weight:420; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #pg-mobile-auth-entry .pg-zpa-security-arrow{ color:rgba(var(--zp-primary-rgb),0.94); font-size:18px; line-height:1; text-align:right; text-shadow:0 0 12px rgba(var(--zp-primary-rgb),0.20); } #pg-mobile-auth-entry .pg-zpa-skip{ position:absolute; left:0; right:0; bottom:62px; border:0; background:transparent; color:rgba(var(--zp-primary-rgb),0.92); font-size:12px; line-height:1; font-weight:560; cursor:pointer; -webkit-tap-highlight-color:transparent; text-align:center; } /* ========================================================= STEP 1300 — SCREENS 07–08 CREATE PIN + BIOMETRIC ENABLED Scope: isolated to #pg-mobile-auth-entry only. Reuses auth keypad visual language for continuity. ========================================================= */ #pg-mobile-auth-entry .pg-zpa-pin-screen{ justify-content:flex-start; align-items:stretch; padding:26px 0 12px; } #pg-mobile-auth-entry .pg-zpa-pin-copy{ width:100%; text-align:left; margin:0 0 18px; } #pg-mobile-auth-entry .pg-zpa-pin-title{ margin:0; color:#ffffff; font-size:22px; line-height:1.18; letter-spacing:-0.032em; font-weight:590; text-align:left; } #pg-mobile-auth-entry .pg-zpa-pin-sub{ margin:10px 0 0; max-width:250px; color:rgba(255,255,255,0.68); font-size:12px; line-height:1.48; font-weight:420; text-align:left; } #pg-mobile-auth-entry .pg-zpa-pin-sub.is-error{ color:rgb(var(--zp-primary-rgb)); text-shadow:0 0 12px rgba(var(--zp-primary-rgb),0.22); } #pg-mobile-auth-entry .pg-zpa-pin-dots{ display:grid; grid-template-columns:repeat(6, 1fr); gap:7px; width:100%; margin:20px 0 42px; } #pg-mobile-auth-entry .pg-zpa-pin-dot{ height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center; background: radial-gradient(120% 130% at 28% 0%, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 45%), rgba(7,11,13,0.72); border:1px solid rgba(255,255,255,0.13); box-shadow: 0 10px 22px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.026); } #pg-mobile-auth-entry .pg-zpa-pin-dot::after{ content:""; width:5px; height:5px; border-radius:999px; background:rgba(255,255,255,0.38); box-shadow:0 0 8px rgba(255,255,255,0.08); transition:background 160ms ease, box-shadow 160ms ease, transform 160ms ease; } #pg-mobile-auth-entry .pg-zpa-pin-dot.is-filled{ border-color:rgba(var(--zp-primary-rgb),0.56); box-shadow: 0 0 0 1px rgba(var(--zp-primary-rgb),0.13) inset, 0 0 18px rgba(var(--zp-primary-rgb),0.20), 0 10px 22px rgba(0,0,0,0.30); } #pg-mobile-auth-entry .pg-zpa-pin-dot.is-filled::after{ background:rgb(var(--zp-primary-rgb)); box-shadow: 0 0 12px rgba(var(--zp-primary-rgb),0.50), 0 0 24px rgba(var(--zp-primary-rgb),0.20); transform:scale(1.08); } #pg-mobile-auth-entry .pg-zpa-pin-screen .pg-auth-keypad{ margin-top:0; } #pg-mobile-auth-entry .pg-zpa-biometric-hero{ position:relative; width:190px; height:190px; border-radius:999px; display:grid; place-items:center; margin:-8px auto 34px; } #pg-mobile-auth-entry .pg-zpa-biometric-hero::before{ content:""; position:absolute; inset:26px; border-radius:999px; background: radial-gradient(circle at 38% 30%, rgba(255,255,255,0.15), rgba(255,255,255,0.00) 34%), radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.17), rgba(0,0,0,0.34) 72%); border:1px solid rgba(var(--zp-primary-rgb),0.42); box-shadow: 0 0 0 1px rgba(255,255,255,0.055) inset, 0 0 36px rgba(var(--zp-primary-rgb),0.30), 0 0 82px rgba(var(--zp-primary-rgb),0.14), 0 30px 68px rgba(0,0,0,0.48); } #pg-mobile-auth-entry .pg-zpa-biometric-hero::after{ content:""; position:absolute; inset:6px; border-radius:999px; background:conic-gradient(from 210deg, rgba(var(--zp-primary-rgb),0.00), rgba(var(--zp-primary-rgb),0.24), rgba(var(--zp-secondary-rgb),0.12), rgba(var(--zp-primary-rgb),0.00) 62%); filter:blur(14px); opacity:0.55; animation:pgZpOrbSpin 14s linear infinite; } #pg-mobile-auth-entry .pg-zpa-fingerprint-icon{ position:relative; z-index:2; width:96px; height:96px; color:rgb(var(--zp-primary-rgb)); filter: drop-shadow(0 0 18px rgba(var(--zp-primary-rgb),0.48)) drop-shadow(0 0 42px rgba(var(--zp-primary-rgb),0.18)); } #pg-mobile-auth-entry .pg-zpa-fingerprint-icon svg{ width:100%; height:100%; display:block; } #pg-mobile-auth-entry .pg-zpa-biometric-action{ width:100%; margin-top:30px; } /* ========================================================= STEP 1300 — SCREENS 09–10 REWARDS WALLET CREATION + WALLET CREATED Scope: isolated to #pg-mobile-auth-entry only. Final visual foundation before production auth/backend wiring. ========================================================= */ #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="9"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="10"]{ opacity:1; transform:translateX(0) scale(1); pointer-events:auto; filter:blur(0); } #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="7"], #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="8"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="1"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="2"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="3"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="4"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="5"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="6"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="7"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="8"], #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-screen[data-screen="9"]{ opacity:0; transform:translateX(-24px) scale(0.985); } #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="9"], #pg-mobile-auth-entry[data-auth-screen="1"] .pg-zpa-screen[data-screen="10"], #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="9"], #pg-mobile-auth-entry[data-auth-screen="2"] .pg-zpa-screen[data-screen="10"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="9"], #pg-mobile-auth-entry[data-auth-screen="3"] .pg-zpa-screen[data-screen="10"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="9"], #pg-mobile-auth-entry[data-auth-screen="4"] .pg-zpa-screen[data-screen="10"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="9"], #pg-mobile-auth-entry[data-auth-screen="5"] .pg-zpa-screen[data-screen="10"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="9"], #pg-mobile-auth-entry[data-auth-screen="6"] .pg-zpa-screen[data-screen="10"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="9"], #pg-mobile-auth-entry[data-auth-screen="7"] .pg-zpa-screen[data-screen="10"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="9"], #pg-mobile-auth-entry[data-auth-screen="8"] .pg-zpa-screen[data-screen="10"], #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-screen[data-screen="10"]{ opacity:0; transform:translateX(24px) scale(0.985); } #pg-mobile-auth-entry[data-auth-screen="9"] .pg-zpa-dot:nth-child(9), #pg-mobile-auth-entry[data-auth-screen="10"] .pg-zpa-dot:nth-child(10){ width:18px; background:rgba(var(--zp-primary-rgb),0.95); box-shadow:0 0 12px rgba(var(--zp-primary-rgb),0.36); } #pg-mobile-auth-entry .pg-zpa-wallet-screen{ justify-content:center; align-items:center; text-align:center; padding:8px 0 12px; } #pg-mobile-auth-entry .pg-zpa-wallet-hero{ position:relative; width:224px; height:224px; border-radius:999px; display:grid; place-items:center; margin:-14px auto 30px; } #pg-mobile-auth-entry .pg-zpa-wallet-hero::before{ content:""; position:absolute; inset:20px; border-radius:999px; background: radial-gradient(circle at 38% 30%, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 34%), radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.18), rgba(0,0,0,0.34) 72%); border:1px solid rgba(var(--zp-primary-rgb),0.28); box-shadow: 0 0 0 1px rgba(255,255,255,0.045) inset, 0 0 42px rgba(var(--zp-primary-rgb),0.28), 0 0 96px rgba(var(--zp-primary-rgb),0.13), 0 32px 72px rgba(0,0,0,0.52); } #pg-mobile-auth-entry .pg-zpa-wallet-hero::after{ content:""; position:absolute; inset:46px; border-radius:999px; border:1px solid rgba(var(--zp-primary-rgb),0.18); box-shadow:0 0 46px rgba(var(--zp-primary-rgb),0.14) inset; animation:pgZpWalletPulse 3s ease-in-out infinite; } @keyframes pgZpWalletPulse{ 0%,100%{ transform:scale(0.96); opacity:0.36; } 50%{ transform:scale(1.08); opacity:0.74; } } #pg-mobile-auth-entry .pg-zpa-wallet-orbit{ display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } #pg-mobile-auth-entry .pg-zpa-wallet-icon{ position:relative; z-index:2; width:126px; height:98px; display:grid; place-items:center; filter: drop-shadow(0 0 18px rgba(var(--zp-primary-rgb),0.36)) drop-shadow(0 28px 42px rgba(0,0,0,0.42)); animation:pgZpWalletFloat 4.2s ease-in-out infinite; } @keyframes pgZpWalletFloat{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-8px) rotate(2deg); } } #pg-mobile-auth-entry .pg-zpa-wallet-icon svg{ width:100%; height:100%; display:block; } #pg-mobile-auth-entry .pg-zpa-wallet-badge{ position:absolute; right:-4px; bottom:6px; width:36px; height:36px; border-radius:999px; display:grid; place-items:center; color:rgb(var(--zp-primary-rgb)); background: radial-gradient(circle at 40% 28%, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 38%), rgba(5,10,11,0.88); border:1px solid rgba(var(--zp-primary-rgb),0.58); box-shadow: 0 0 18px rgba(var(--zp-primary-rgb),0.34), inset 0 0 0 1px rgba(255,255,255,0.05); } #pg-mobile-auth-entry .pg-zpa-wallet-badge svg{ width:22px; height:22px; display:block; } #pg-mobile-auth-entry .pg-zpa-wallet-kicker{ margin:0 0 12px; color:rgb(var(--zp-primary-rgb)); font-size:11px; line-height:1; font-weight:700; letter-spacing:0.26em; text-transform:uppercase; text-shadow:0 0 16px rgba(var(--zp-primary-rgb),0.28); } #pg-mobile-auth-entry .pg-zpa-wallet-title{ margin:0; color:#ffffff; font-size:20px; line-height:1.18; letter-spacing:-0.025em; font-weight:560; text-align:center; } #pg-mobile-auth-entry .pg-zpa-wallet-sub{ margin:12px auto 0; max-width:250px; color:rgba(255,255,255,0.68); font-size:12px; line-height:1.52; font-weight:420; text-align:center; } #pg-mobile-auth-entry .pg-zpa-wallet-progress{ width:min(300px, 84vw); height:3px; border-radius:999px; background:rgba(255,255,255,0.10); margin:34px auto 0; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,0.035) inset; } #pg-mobile-auth-entry .pg-zpa-wallet-progress-fill{ height:100%; width:34%; border-radius:999px; background:linear-gradient(90deg, rgba(var(--zp-primary-rgb),0.96), rgba(var(--zp-secondary-rgb),0.84)); box-shadow:0 0 18px rgba(var(--zp-primary-rgb),0.42); animation:pgZpWalletProgress 2.45s ease-in-out infinite; } @keyframes pgZpWalletProgress{ 0%{ transform:translateX(-95%); width:34%; } 48%{ width:58%; } 100%{ transform:translateX(290%); width:34%; } } #pg-mobile-auth-entry .pg-zpa-wallet-created-action{ width:100%; margin-top:30px; } /* ========================================================= STEP 1300 — SCREEN 11 WELCOME BACK / RETURNING USER UNLOCK Scope: isolated to #pg-mobile-auth-entry only. Activated by the Welcome screen Log in action for visual review. ========================================================= */ #pg-mobile-auth-entry[data-auth-screen="11"] .pg-zpa-screen[data-screen="11"]{ opacity:1; transform:translateX(0) scale(1); pointer-events:auto; filter:blur(0); } #pg-mobile-auth-entry[data-auth-screen="11"] .pg-zpa-screen:not([data-screen="11"]){ opacity:0; transform:translateX(-24px) scale(0.985); pointer-events:none; filter:blur(4px); } #pg-mobile-auth-entry:not([data-auth-screen="11"]) .pg-zpa-screen[data-screen="11"]{ opacity:0; transform:translateX(24px) scale(0.985); pointer-events:none; filter:blur(4px); } #pg-mobile-auth-entry .pg-zpa-welcome-back-screen{ justify-content:flex-start; align-items:stretch; padding:18px 0 12px; } #pg-mobile-auth-entry .pg-zpa-wb-hero{ width:min(272px, 76vw); height:min(272px, 76vw); position:relative; display:grid; place-items:center; margin:-6px auto 18px; border-radius:999px; } #pg-mobile-auth-entry .pg-zpa-wb-hero::before{ content:""; position:absolute; inset:16%; border-radius:999px; background: radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.22), rgba(var(--zp-primary-rgb),0.06) 40%, rgba(0,0,0,0.00) 72%); box-shadow: 0 0 0 1px rgba(var(--zp-primary-rgb),0.16), 0 0 44px rgba(var(--zp-primary-rgb),0.24), inset 0 0 34px rgba(var(--zp-primary-rgb),0.10); filter:blur(0.2px); } #pg-mobile-auth-entry .pg-zpa-wb-growth-orb{ position:relative; width:184px; height:184px; border-radius:999px; display:grid; place-items:center; background: radial-gradient(circle at 36% 28%, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 28%), radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.18), rgba(0,0,0,0.28) 68%), linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.16)); border:1px solid rgba(var(--zp-primary-rgb),0.38); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 32px rgba(var(--zp-primary-rgb),0.30), 0 34px 72px rgba(0,0,0,0.48); overflow:hidden; } #pg-mobile-auth-entry .pg-zpa-wb-growth-orb::before{ content:""; position:absolute; inset:22px; border-radius:999px; border:1px solid rgba(var(--zp-primary-rgb),0.30); box-shadow:0 0 28px rgba(var(--zp-primary-rgb),0.18) inset; opacity:0.92; } #pg-mobile-auth-entry .pg-zpa-wb-growth-orb::after{ content:""; position:absolute; width:148%; height:148%; border-radius:999px; background:conic-gradient(from 210deg, rgba(var(--zp-primary-rgb),0.00), rgba(var(--zp-primary-rgb),0.28), rgba(var(--zp-secondary-rgb),0.12), rgba(var(--zp-primary-rgb),0.00) 62%); filter:blur(10px); opacity:0.72; animation:pgZpOrbSpin 14s linear infinite; } #pg-mobile-auth-entry .pg-zpa-wb-avatar{ position:relative; z-index:2; width:82px; height:82px; border-radius:999px; display:grid; place-items:center; color:rgb(var(--zp-primary-rgb)); background: radial-gradient(circle at 38% 28%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 38%), radial-gradient(circle at 50% 54%, rgba(var(--zp-primary-rgb),0.13), rgba(0,0,0,0.22) 66%), rgba(5,10,11,0.36); border:1px solid rgba(var(--zp-primary-rgb),0.24); box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 22px rgba(var(--zp-primary-rgb),0.20), 0 20px 44px rgba(0,0,0,0.34); font-size:36px; line-height:1; font-weight:780; letter-spacing:-0.065em; text-shadow: 0 0 18px rgba(var(--zp-primary-rgb),0.34), 0 10px 28px rgba(0,0,0,0.38); } #pg-mobile-auth-entry .pg-zpa-wb-horizon{ position:absolute; left:-14%; right:-14%; bottom:18px; height:84px; border-radius:50% 50% 0 0; background: radial-gradient(80% 100% at 50% 100%, rgba(var(--zp-primary-rgb),0.38), rgba(var(--zp-primary-rgb),0.00) 54%), linear-gradient(180deg, rgba(var(--zp-primary-rgb),0.00), rgba(var(--zp-primary-rgb),0.18)); border-top:1px solid rgba(var(--zp-primary-rgb),0.58); box-shadow:0 -12px 42px rgba(var(--zp-primary-rgb),0.22); opacity:0.68; filter:blur(0.1px); } #pg-mobile-auth-entry .pg-zpa-wb-copy{ width:100%; text-align:left; margin:0 0 22px; } #pg-mobile-auth-entry .pg-zpa-wb-kicker{ margin:0 0 8px; color:rgba(255,255,255,0.94); font-size:17px; line-height:1.2; letter-spacing:-0.03em; font-weight:480; text-align:left; } #pg-mobile-auth-entry .pg-zpa-wb-name{ margin:0; color:#ffffff; font-size:32px; line-height:1.05; letter-spacing:-0.055em; font-weight:760; text-align:left; text-shadow:0 22px 42px rgba(0,0,0,0.44); } #pg-mobile-auth-entry .pg-zpa-wb-sub{ margin:16px 0 0; max-width:280px; color:rgba(255,255,255,0.66); font-size:14px; line-height:1.55; font-weight:420; text-align:left; } #pg-mobile-auth-entry .pg-zpa-wb-options{ display:flex; flex-direction:column; gap:14px; width:100%; margin-top:8px; } #pg-mobile-auth-entry .pg-zpa-wb-divider{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; color:rgba(255,255,255,0.46); font-size:12px; font-weight:650; letter-spacing:0.02em; text-transform:uppercase; } #pg-mobile-auth-entry .pg-zpa-wb-divider::before, #pg-mobile-auth-entry .pg-zpa-wb-divider::after{ content:""; height:1px; background:rgba(255,255,255,0.10); } #pg-mobile-auth-entry .pg-zpa-wb-option{ width:100%; min-height:66px; border:1px solid rgba(255,255,255,0.085); border-radius:14px; display:grid; grid-template-columns:50px 1fr 18px; align-items:center; gap:12px; padding:10px 12px; color:#ffffff; background: radial-gradient(120% 190% at 16% 0%, rgba(var(--zp-primary-rgb),0.13), rgba(255,255,255,0.00) 44%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014) 52%, rgba(0,0,0,0.28)), rgba(8,13,15,0.90); box-shadow: 0 16px 34px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(255,255,255,0.026); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 100ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease; } #pg-mobile-auth-entry .pg-zpa-wb-option:active{ transform:scale(0.988); filter:brightness(1.06); border-color:rgba(var(--zp-primary-rgb),0.42); box-shadow: 0 0 24px rgba(var(--zp-primary-rgb),0.18), 0 16px 34px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.06); } #pg-mobile-auth-entry .pg-zpa-wb-icon{ width:42px; height:42px; border-radius:999px; display:grid; place-items:center; color:rgb(var(--zp-primary-rgb)); background:rgba(var(--zp-primary-rgb),0.07); box-shadow: 0 0 20px rgba(var(--zp-primary-rgb),0.16), inset 0 0 0 1px rgba(var(--zp-primary-rgb),0.12); } #pg-mobile-auth-entry .pg-zpa-wb-icon svg{ width:25px; height:25px; display:block; filter:drop-shadow(0 0 10px rgba(var(--zp-primary-rgb),0.34)); } #pg-mobile-auth-entry .pg-zpa-wb-main{ min-width:0; text-align:left; } #pg-mobile-auth-entry .pg-zpa-wb-label{ display:block; color:rgba(255,255,255,0.96); font-size:15px; line-height:1.2; font-weight:610; letter-spacing:-0.025em; } #pg-mobile-auth-entry .pg-zpa-wb-note{ display:block; margin-top:5px; color:rgba(255,255,255,0.58); font-size:12px; line-height:1.2; font-weight:420; } #pg-mobile-auth-entry .pg-zpa-wb-arrow{ color:rgba(var(--zp-primary-rgb),0.96); font-size:28px; line-height:1; text-align:right; text-shadow:0 0 14px rgba(var(--zp-primary-rgb),0.24); } #pg-mobile-auth-entry .pg-zpa-wb-protected{ margin:34px auto 0; max-width:240px; display:flex; flex-direction:column; align-items:center; gap:9px; color:rgba(255,255,255,0.50); font-size:12px; line-height:1.45; text-align:center; } #pg-mobile-auth-entry .pg-zpa-wb-shield{ width:30px; height:30px; color:rgb(var(--zp-primary-rgb)); opacity:0.92; filter:drop-shadow(0 0 14px rgba(var(--zp-primary-rgb),0.32)); } #pg-mobile-auth-entry .pg-zpa-wb-shield svg{ width:100%; height:100%; display:block; } /* ========================================================= STEP 1300 — FINAL SECURITY OPTIONS PARITY POLISH Scope: ONLY Screen 06 security option selectors. Purpose: match Welcome Back option scale, spacing, divider, icon sizing, typography, arrow treatment, and card presence. ========================================================= */ #pg-mobile-auth-entry .pg-zpa-security-options{ display:flex; flex-direction:column; gap:14px; width:100%; margin-top:30px; } #pg-mobile-auth-entry .pg-zpa-security-divider{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; color:rgba(255,255,255,0.46); font-size:12px; line-height:1; font-weight:650; letter-spacing:0.02em; text-transform:uppercase; } #pg-mobile-auth-entry .pg-zpa-security-divider::before, #pg-mobile-auth-entry .pg-zpa-security-divider::after{ content:""; height:1px; background:rgba(255,255,255,0.10); } #pg-mobile-auth-entry .pg-zpa-security-option{ width:100%; min-height:66px; border:1px solid rgba(255,255,255,0.085); border-radius:14px; display:grid; grid-template-columns:50px 1fr 18px; align-items:center; gap:12px; padding:10px 12px; color:#ffffff; background: radial-gradient(120% 190% at 16% 0%, rgba(var(--zp-primary-rgb),0.13), rgba(255,255,255,0.00) 44%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014) 52%, rgba(0,0,0,0.28)), rgba(8,13,15,0.90); box-shadow: 0 16px 34px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(255,255,255,0.026); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 100ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease; } #pg-mobile-auth-entry .pg-zpa-security-option:active{ transform:scale(0.988); filter:brightness(1.06); border-color:rgba(var(--zp-primary-rgb),0.42); box-shadow: 0 0 24px rgba(var(--zp-primary-rgb),0.18), 0 16px 34px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.06); } #pg-mobile-auth-entry .pg-zpa-security-icon{ width:42px; height:42px; border-radius:999px; display:grid; place-items:center; color:rgb(var(--zp-primary-rgb)); background:rgba(var(--zp-primary-rgb),0.07); box-shadow: 0 0 20px rgba(var(--zp-primary-rgb),0.16), inset 0 0 0 1px rgba(var(--zp-primary-rgb),0.12); } #pg-mobile-auth-entry .pg-zpa-security-icon svg{ width:25px; height:25px; display:block; filter:drop-shadow(0 0 10px rgba(var(--zp-primary-rgb),0.34)); } #pg-mobile-auth-entry .pg-zpa-security-main{ min-width:0; text-align:left; } #pg-mobile-auth-entry .pg-zpa-security-label{ display:block; color:rgba(255,255,255,0.96); font-size:15px; line-height:1.2; font-weight:610; letter-spacing:-0.025em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #pg-mobile-auth-entry .pg-zpa-security-note{ display:block; margin-top:5px; color:rgba(255,255,255,0.58); font-size:12px; line-height:1.2; font-weight:420; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #pg-mobile-auth-entry .pg-zpa-security-arrow{ color:rgba(var(--zp-primary-rgb),0.96); font-size:28px; line-height:1; text-align:right; text-shadow:0 0 14px rgba(var(--zp-primary-rgb),0.24); } /* ========================================================= STEP 1300 — FINAL ORB HERO SYSTEM POLISH Scope: ONLY orb/icon hero selectors for Screens 02, 05, 08, 09, 10. Purpose: align orb size, centerline, glow footprint, and hero spacing while preserving each screen's unique icon and animation. ========================================================= */ #pg-mobile-auth-entry .pg-zpa-loader-wrap, #pg-mobile-auth-entry .pg-zpa-check-hero, #pg-mobile-auth-entry .pg-zpa-biometric-hero, #pg-mobile-auth-entry .pg-zpa-wallet-hero{ width:224px; height:224px; position:relative; display:grid; place-items:center; border-radius:999px; margin:-10px auto 30px; } #pg-mobile-auth-entry .pg-zpa-loader-core{ width:156px; height:156px; background: radial-gradient(circle at 38% 28%, rgba(255,255,255,0.17), rgba(255,255,255,0.00) 34%), radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.19), rgba(0,0,0,0.34) 72%); border:1px solid rgba(var(--zp-primary-rgb),0.46); box-shadow: 0 0 0 1px rgba(255,255,255,0.055) inset, 0 0 40px rgba(var(--zp-primary-rgb),0.32), 0 0 88px rgba(var(--zp-primary-rgb),0.13), 0 31px 70px rgba(0,0,0,0.50); } #pg-mobile-auth-entry .pg-zpa-loader-core::before{ inset:21px; border-color:rgba(var(--zp-primary-rgb),0.25); box-shadow:0 0 34px rgba(var(--zp-primary-rgb),0.15) inset; } #pg-mobile-auth-entry .pg-zpa-loader-core::after{ inset:39px; border-color:rgba(var(--zp-primary-rgb),0.18); opacity:0.72; } #pg-mobile-auth-entry .pg-zpa-check-hero::before, #pg-mobile-auth-entry .pg-zpa-biometric-hero::before, #pg-mobile-auth-entry .pg-zpa-wallet-hero::before{ inset:34px; border-radius:999px; background: radial-gradient(circle at 38% 30%, rgba(255,255,255,0.15), rgba(255,255,255,0.00) 34%), radial-gradient(circle at 50% 50%, rgba(var(--zp-primary-rgb),0.18), rgba(0,0,0,0.34) 72%); border:1px solid rgba(var(--zp-primary-rgb),0.44); box-shadow: 0 0 0 1px rgba(255,255,255,0.052) inset, 0 0 40px rgba(var(--zp-primary-rgb),0.31), 0 0 88px rgba(var(--zp-primary-rgb),0.13), 0 31px 70px rgba(0,0,0,0.50); } #pg-mobile-auth-entry .pg-zpa-check-hero::after, #pg-mobile-auth-entry .pg-zpa-biometric-hero::after{ inset:8px; border-radius:999px; background:conic-gradient(from 210deg, rgba(var(--zp-primary-rgb),0.00), rgba(var(--zp-primary-rgb),0.22), rgba(var(--zp-secondary-rgb),0.12), rgba(var(--zp-primary-rgb),0.00) 62%); border:0; box-shadow:none; filter:blur(14px); opacity:0.52; animation:pgZpOrbSpin 15s linear infinite; } #pg-mobile-auth-entry .pg-zpa-wallet-hero::after{ inset:56px; border-radius:999px; border:1px solid rgba(var(--zp-primary-rgb),0.20); box-shadow:0 0 46px rgba(var(--zp-primary-rgb),0.14) inset; background:transparent; filter:none; opacity:1; animation:pgZpWalletPulse 3s ease-in-out infinite; } #pg-mobile-auth-entry .pg-zpa-check-icon{ width:126px; height:126px; } #pg-mobile-auth-entry .pg-zpa-fingerprint-icon{ width:126px; height:126px; } #pg-mobile-auth-entry .pg-zpa-wallet-icon{ width:128px; height:100px; } #pg-mobile-auth-entry .pg-zpa-wallet-orbit{ display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } @media (max-height: 700px){ #pg-mobile-auth-entry .pg-zpa-loader-wrap, #pg-mobile-auth-entry .pg-zpa-check-hero, #pg-mobile-auth-entry .pg-zpa-biometric-hero, #pg-mobile-auth-entry .pg-zpa-wallet-hero{ width:190px; height:190px; margin:-6px auto 24px; } #pg-mobile-auth-entry .pg-zpa-loader-core{ width:136px; height:136px; } #pg-mobile-auth-entry .pg-zpa-check-hero::before, #pg-mobile-auth-entry .pg-zpa-biometric-hero::before, #pg-mobile-auth-entry .pg-zpa-wallet-hero::before{ inset:27px; } #pg-mobile-auth-entry .pg-zpa-check-hero::after, #pg-mobile-auth-entry .pg-zpa-biometric-hero::after{ inset:4px; } #pg-mobile-auth-entry .pg-zpa-wallet-hero::after{ inset:45px; } #pg-mobile-auth-entry .pg-zpa-check-icon{ width:58px; height:58px; } #pg-mobile-auth-entry .pg-zpa-fingerprint-icon{ width:82px; height:82px; } #pg-mobile-auth-entry .pg-zpa-wallet-icon{ width:108px; height:84px; } #pg-mobile-auth-entry .pg-zpa-wallet-orbit{ display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } } @media (max-height: 700px){ #pg-mobile-auth-entry .pg-zpa-wallet-hero{ width:186px; height:186px; margin-bottom:24px; } #pg-mobile-auth-entry .pg-zpa-wallet-icon{ width:108px; height:84px; } #pg-mobile-auth-entry .pg-zpa-wallet-progress{ margin-top:24px; } } @media (max-height: 700px){ #pg-mobile-auth-entry .pg-zpa-pin-screen{ padding-top:18px; } #pg-mobile-auth-entry .pg-zpa-pin-title{ font-size:20px; } #pg-mobile-auth-entry .pg-zpa-pin-dots{ margin:16px 0 28px; } #pg-mobile-auth-entry .pg-zpa-pin-dot{ height:30px; } #pg-mobile-auth-entry .pg-zpa-biometric-hero{ width:164px; height:164px; margin-bottom:24px; } #pg-mobile-auth-entry .pg-zpa-fingerprint-icon{ width:82px; height:82px; } } @media (max-height: 700px){ #pg-mobile-auth-entry .pg-zpa-shell{ padding-top:max(12px, env(safe-area-inset-top)); padding-bottom:max(12px, env(safe-area-inset-bottom)); } #pg-mobile-auth-entry .pg-zpa-top{ height:44px; } #pg-mobile-auth-entry .pg-zpa-hero{ width:min(220px, 66vw); height:min(220px, 66vw); margin-bottom:18px; } #pg-mobile-auth-entry .pg-zpa-growth-orb{ width:154px; height:154px; } #pg-mobile-auth-entry .pg-zpa-wb-hero{ width:min(220px, 66vw); height:min(220px, 66vw); margin-bottom:14px; } #pg-mobile-auth-entry .pg-zpa-wb-growth-orb{ width:154px; height:154px; } #pg-mobile-auth-entry .pg-zpa-wb-avatar{ width:72px; height:72px; font-size:32px; } #pg-mobile-auth-entry .pg-zpa-loader-wrap{ width:216px; height:216px; margin-bottom:22px; } #pg-mobile-auth-entry .pg-zpa-title{ font-size:23px; } #pg-mobile-auth-entry .pg-zpa-sub{ font-size:13px; margin-top:10px; } #pg-mobile-auth-entry .pg-zpa-actions{ margin-top:22px; } #pg-mobile-auth-entry .pg-zpa-form-screen{ padding-top:20px; } #pg-mobile-auth-entry .pg-zpa-form-title{ font-size:21px; } #pg-mobile-auth-entry .pg-zpa-form-sub{ font-size:12px; margin-top:9px; } #pg-mobile-auth-entry .pg-auth-key{ height:46px; } #pg-mobile-auth-entry .pg-zpa-otp-box{ height:38px; } #pg-mobile-auth-entry .pg-zpa-primary-btn{ height:48px; } } /* ========================================================= STEP 1300 — FINAL PIN ENTRY / KEYPAD PARITY POLISH Scope: ONLY Screen 07 PIN entry + PIN keypad selectors. Purpose: match Screen 04 verification code box sizing, spacing, card treatment, and keypad vertical position. ========================================================= */ #pg-mobile-auth-entry .pg-zpa-pin-dots{ display:grid; grid-template-columns:repeat(6, 1fr); gap:7px; width:100%; margin:20px 0 12px; } #pg-mobile-auth-entry .pg-zpa-pin-dot{ height:43px; border-radius:9px; display:flex; align-items:center; justify-content:center; background: radial-gradient(120% 130% at 28% 0%, rgba(255,255,255,0.075), rgba(255,255,255,0.00) 45%), rgba(7,11,13,0.82); border:1px solid rgba(255,255,255,0.15); box-shadow: 0 12px 24px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.035); } #pg-mobile-auth-entry .pg-zpa-pin-dot::after{ content:""; width:0; height:0; border-radius:999px; background:transparent; box-shadow:none; transition:none; } #pg-mobile-auth-entry .pg-zpa-pin-dot.is-filled{ border-color:rgba(var(--zp-primary-rgb),0.56); box-shadow: 0 0 0 1px rgba(var(--zp-primary-rgb),0.13) inset, 0 0 18px rgba(var(--zp-primary-rgb),0.20), 0 12px 24px rgba(0,0,0,0.34); } #pg-mobile-auth-entry .pg-zpa-pin-dot.is-filled::after{ width:8px; height:8px; background:rgb(var(--zp-primary-rgb)); box-shadow: 0 0 12px rgba(var(--zp-primary-rgb),0.50), 0 0 24px rgba(var(--zp-primary-rgb),0.20); transform:none; } #pg-mobile-auth-entry .pg-zpa-pin-screen .pg-auth-keypad{ width:100%; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; margin-top:4px; } /* ========================================================= STEP 1301 — iPHONE WELCOME HERO FULL-BLEED POLISH Scope: ONLY Screen 01 Welcome hero visual layers on iPhone/WebKit. Purpose: allow the hero horizon/glow field to span the full iPhone viewport while keeping the orb/leaf centered and preserving all copy, animations, desktop, Android, and flow logic. ========================================================= */ @supports (-webkit-touch-callout: none){ #pg-mobile-auth-entry .pg-zpa-screen-welcome .pg-zpa-hero{ width:100vw !important; max-width:none !important; height:min(272px, 76vw) !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; border-radius:0 !important; overflow:visible !important; } #pg-mobile-auth-entry .pg-zpa-screen-welcome .pg-zpa-hero::before{ inset:auto !important; left:50% !important; top:50% !important; width:min(272px, 76vw) !important; height:min(272px, 76vw) !important; transform:translate(-50%, -50%) !important; border-radius:999px !important; } #pg-mobile-auth-entry .pg-zpa-screen-welcome .pg-zpa-horizon{ left:0 !important; right:0 !important; width:100vw !important; } /* Welcome Back: match the iPhone full-bleed hero field from Screen 01 */ #pg-mobile-auth-entry .pg-zpa-screen-welcome-back .pg-zpa-wb-hero{ width:100vw !important; max-width:none !important; height:min(272px, 76vw) !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; border-radius:0 !important; overflow:visible !important; } #pg-mobile-auth-entry .pg-zpa-screen-welcome-back .pg-zpa-wb-hero::before{ inset:auto !important; left:50% !important; top:50% !important; width:min(272px, 76vw) !important; height:min(272px, 76vw) !important; transform:translate(-50%, -50%) !important; border-radius:999px !important; } #pg-mobile-auth-entry .pg-zpa-screen-welcome-back .pg-zpa-wb-horizon{ left:0 !important; right:0 !important; width:100vw !important; } } @media (prefers-reduced-motion: reduce){ #pg-mobile-auth-entry *, #pg-mobile-auth-entry *::before, #pg-mobile-auth-entry *::after{ animation:none !important; transition:none !important; } } } /* ===== END STYLE BLOCK: pg-step1300-mobile-auth-css ===== */ /* ===== BEGIN STYLE BLOCK: inline-style ===== */ :root{ --z-bg:#070A0B; --z-aurora-2: rgba(255,255,255,0.06); --z-surface:#0B1012; --z-surface-2:#0E1518; --z-card: rgba(11,16,18,0.92); --z-border: rgba(255,255,255,0.10); --z-border-2: rgba(255,255,255,0.08); --z-text: rgba(255,255,255,0.92); --z-text-2: rgba(255,255,255,0.66); --z-muted: rgba(255,255,255,0.58); --accent:#00ffd5; --accent-rgb: 0,255,213; --accent-border: rgba(var(--accent-rgb),0.60); --accent-soft: rgba(var(--accent-rgb),0.18); --accent-glow: rgba(var(--accent-rgb),0.22); --accent-glow-strong: rgba(var(--accent-rgb),0.38); --radius-card:22px; --radius-control:16px; --shadow-card: 0 18px 60px rgba(0,0,0,0.55); --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.06); } /* Desktop/Tablet: hide legacy hybrid UI always (safety) */ #pg-hybrid-row, .pg-hybrid-row{ display:none !important; } /* Desktop/Tablet: hide NEW Mobile-only hero hybrid payment button */ @media (min-width: 641px){ #pg-hybredpayment-hero-row, #pg-hybredpayment-hero{ display:none !important; } } /* ========================================================= STEP 350 — DESKTOP ONLY: REMOVE IN-STORE QR BOARD GOAL: - Remove any in-store binding UI from the Desktop Gateway - Do NOT affect mobile or POS simulator Scope: DESKTOP ONLY (>= 641px) ========================================================= */ @media (min-width: 641px){ .pg-instore-qr-board, #pg-instore-qr-board, .pg-instore-qr-shell, .pg-instore-stage-shell, #pg-instore-bind-link { display: none !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; } } /* ========================================================= STEP 351 — DESKTOP ONLY: PRE-PAINT HARD HIDE APPLY REWARDS FLASH GOAL: - Prevent the mobile rewards amount / keypad from flashing on desktop - Desktop only - Do NOT affect mobile ========================================================= */ @media (min-width: 521px){ #pg-ar-overlay, #pg-ar-overlay *, #pg-ar-entered, #pg-ar-keypad, .pg-ar-inner, .pg-ar-stack, .pg-ar-enter, .pg-ar-keypad, .pg-ar-key, .pg-ar-key-dot, .pg-ar-key-back{ display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; left: -99999px !important; top: -99999px !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; overflow: hidden !important; } } /* Mobile: ensure hero button is visible (overrides any safety hides) */ @media (max-width: 640px){ #pg-hybredpayment-hero-row{ display:block !important; } #pg-hybredpayment-hero{ display:flex !important; } } /* ========================================== POPUP / STANDALONE PAGE FRAME OVERRIDES (Scoped ONLY to /luke2 via html.zelen-gateway-embed) Goal: Remove Duda header/footer + extra page padding/margins ========================================== */ html.zelen-gateway-embed, html.zelen-gateway-embed body{ background: #0b0f12 !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 100vh !important; overflow-x: hidden !important; overflow-y: auto !important; } html.zelen-gateway-embed body{ display: flex !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; } /* Hard-hide Duda header/footer remnants in embed popup (DESKTOP ONLY) */ html.zelen-gateway-embed #hamburger-header, html.zelen-gateway-embed #hamburger-header-container, html.zelen-gateway-embed #mobile-hamburger-header, html.zelen-gateway-embed #mobile-hamburger-header-container, html.zelen-gateway-embed #stickyHeaderSpacer, html.zelen-gateway-embed .stickyHeaderSpacer, html.zelen-gateway-embed .hamburger-header, html.zelen-gateway-embed .hamburger-header-container{ display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } /* Remove any outer Duda layout padding/gutters around custom code */ html.zelen-gateway-embed #dmRoot, html.zelen-gateway-embed #dm-outer-wrapper, html.zelen-gateway-embed #dm-outer-wrapper *[class*="dmResp"], html.zelen-gateway-embed .dmRespRow, html.zelen-gateway-embed .dmRespCol, html.zelen-gateway-embed .dmRespColsWrapper{ padding: 0 !important; margin: 0 !important; } /* Hide Duda header + footer ONLY on this page */ html.zelen-gateway-embed header, html.zelen-gateway-embed footer, html.zelen-gateway-embed .dmHeaderContainer, html.zelen-gateway-embed .dmFooterContainer, html.zelen-gateway-embed .dmHeader, html.zelen-gateway-embed .dmFooter, html.zelen-gateway-embed .dmFooterResp, html.zelen-gateway-embed .dmFooterWrapper, html.zelen-gateway-embed .dmNavBar, html.zelen-gateway-embed .dmWidget-footer, html.zelen-gateway-embed .site-footer, html.zelen-gateway-embed .footer { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } /* Remove any layout padding around the embed so the popup is tight */ html.zelen-gateway-embed #dm, html.zelen-gateway-embed #dmRoot, html.zelen-gateway-embed .dmBody, html.zelen-gateway-embed .dmContent, html.zelen-gateway-embed .dmInner, html.zelen-gateway-embed .dmContentArea, html.zelen-gateway-embed .dmRespRow, html.zelen-gateway-embed .dmRespColsWrapper, html.zelen-gateway-embed .dmRespCol, html.zelen-gateway-embed .dmWidget, html.zelen-gateway-embed .dmWidgetContent { margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } /* Gateway root should not introduce extra whitespace */ html.zelen-gateway-embed #crypto-gateway-demo-root{ width: 100% !important; max-width: 980px !important; margin: 0 auto !important; padding: 5px !important; /* 5px symmetrical frame around gateway */ box-sizing: border-box !important; background: #0b0f12 !important; } /* Desktop-only: keep the gateway centered and prevent any full-width stretching */ @media (min-width: 1025px){ html.zelen-gateway-embed body{ display: flex !important; justify-content: center !important; align-items: flex-start !important; } html.zelen-gateway-embed #crypto-gateway-demo-root{ width: 100% !important; max-width: 980px !important; margin: 0 auto !important; padding: 5px !important; /* 5px symmetrical frame around gateway */ box-sizing: border-box !important; background: #0b0f12 !important; } html.zelen-gateway-embed .pg-layout{ max-width: 980px !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; } } /* Shape mapping from widget builder */ html[data-shape="pill"]{ --radius-control: 999px; --radius-card: 26px; } html[data-shape="rounded"]{ --radius-control: 18px; --radius-card: 22px; } html[data-shape="sharp"]{ --radius-control: 12px; --radius-card: 18px; } /* ---------- ZELEN THEME OVERRIDES (popup + gateway) ---------- */ body{ background: radial-gradient(1200px 700px at 15% 12%, rgba(var(--accent-rgb),0.18), rgba(0,0,0,0)) , radial-gradient(900px 500px at 85% 22%, var(--z-aurora-2), rgba(0,0,0,0)) , var(--z-bg); color: var(--z-text); } #crypto-gateway-demo-root{ padding: 24px; color: var(--z-text); } /* Centered single-column canvas (Option A) */ .pg-layout{ grid-template-columns: 1fr !important; max-width: 980px !important; margin: 0 auto !important; } @media (max-width: 1024px){ .pg-layout{ max-width: 860px !important; } } /* Hide any legacy summary/right rail containers */ .summary-card, .pg-summary, .pg-summary-card{ display: none !important; } .pg-card{ background: var(--z-card) !important; border: 1px solid var(--z-border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card), var(--shadow-inner) !important; color: var(--z-text) !important; } /* Text harmonies */ .pg-card h1, .pg-card h2, .pg-card h3, .pg-card h4, .pg-title, .pg-subtitle, .pg-os-title{ color: var(--z-text) !important; display: flex; align-items: center; gap: 12px; line-height: 1.05; } .pg-os-brand{ height: 24px; /* 22–26px spec */ width: auto; display: block; flex: 0 0 auto; margin: 0; /* Accent glow (matches widget builder accent) */ filter: drop-shadow(0 0 8px rgba(var(--accent-rgb),0.34)) drop-shadow(0 0 18px rgba(var(--accent-rgb),0.22)); opacity: 0.47; } .pg-muted, .pg-os-meta, .pg-os-line.pg-os-muted{ color: var(--z-text-2) !important; } /* ===== Order Details – Subtotal/Taxes/Fees readability (Desktop only) ===== */ /* Only affects: Subtotal, Excise Tax, Local Tax, Service Fee */ .pg-os-drawer .pg-os-line.pg-os-muted{ color: #000000 !important; font-weight: 300 !important; } /* Tiles (payment + assets) */ .pg-tile, .pg-asset-pill{ background: rgba(255,255,255,0.04) !important; border: 1px solid var(--z-border-2) !important; border-radius: var(--radius-control) !important; color: var(--z-text) !important; } .pg-tile:hover, .pg-asset-pill:hover{ border-color: rgba(255,255,255,0.14) !important; } .pg-tile-active, .pg-asset-active{ border-color: var(--accent-border) !important; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 26px var(--accent-glow) !important; background: radial-gradient(800px 260px at 20% 30%, rgba(var(--accent-rgb),0.10), rgba(255,255,255,0.03)) !important; } /* Inputs */ #crypto-gateway-demo-root input, #crypto-gateway-demo-root select, #crypto-gateway-demo-root textarea{ background: rgba(255,255,255,0.04) !important; border: 1px solid var(--z-border-2) !important; border-radius: var(--radius-control) !important; color: var(--z-text) !important; } #crypto-gateway-demo-root input::placeholder{ color: rgba(255,255,255,0.38) !important; } #crypto-gateway-demo-root input:focus, #crypto-gateway-demo-root select:focus, #crypto-gateway-demo-root textarea:focus{ outline: none !important; border-color: var(--accent-border) !important; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 18px var(--accent-glow) !important; } /* Primary button mapped to emphasis */ .pg-btn{ border-radius: var(--radius-control) !important; } html[data-emphasis="solid"] .pg-btn-primary{ background: linear-gradient(180deg, rgba(var(--accent-rgb),1), rgba(var(--accent-rgb),0.72)) !important; color: rgba(0,0,0,0.85) !important; border: 1px solid rgba(var(--accent-rgb),0.72) !important; box-shadow: 0 10px 30px rgba(var(--accent-rgb),0.16) !important; } html[data-emphasis="outline"] .pg-btn-primary{ background: rgba(0,0,0,0) !important; color: rgba(var(--accent-rgb),1) !important; border: 1px solid rgba(var(--accent-rgb),0.72) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.08) !important; } html[data-emphasis="glow"] .pg-btn-primary{ background: rgba(var(--accent-rgb),0.10) !important; color: rgba(var(--accent-rgb),1) !important; border: 1px solid rgba(var(--accent-rgb),0.72) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.10), 0 0 34px rgba(var(--accent-rgb),0.26) !important; } .pg-btn-primary:hover{ filter: brightness(1.05); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18), 0 0 38px rgba(var(--accent-rgb),0.30) !important; } /* Order summary button */ .pg-os-details-btn{ border-radius: var(--radius-control) !important; border: 1px solid var(--z-border-2) !important; background: rgba(255,255,255,0.03) !important; color: var(--z-text) !important; } .pg-os-details-btn:hover{ border-color: var(--accent-border) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; } /* Mobile padding */ /* Desktop/Tablet safety: never show the mobile overlay */ .pg-mobile-customer-overlay{ display:none; } @media (max-width: 520px){ #crypto-gateway-demo-root{ padding: 16px; } .pg-layout{ max-width: 100% !important; } } /* === RESET / BASE === */ /* Desktop/Tablet: hide the mobile-only asset header inside meta */ .pg-meta-assethead{ display:none; } #crypto-gateway-demo-root * { box-sizing: border-box; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ===== MOBILE FIX: Price / Amount / Method left-aligned, % badge centered ===== */ @media (max-width: 640px) { .pg-crypto-meta-value { color: var(--z-text) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 2px; width: 100%; text-align: left !important; } /* Ensure the actual value text hugs the left edge */ .pg-crypto-meta-value span, #pg-meta-price, #pg-meta-amount, #pg-meta-method { text-align: left !important; align-self: flex-start !important; } /* Keep the ▲ / ▼ % centered under the price */ .pg-crypto-meta-change { font-size: 12px; align-self: center !important; text-align: center !important; width: 100%; } } #crypto-gateway-demo-root { padding: 24px; background: #f7f9fc; color: #111827; font-size: 16px; line-height: 1.5; overflow-x: hidden; } .pg-layout { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2.1fr 1fr; gap: 24px; } @media (max-width: 960px) { .pg-layout { grid-template-columns: 1fr; gap: 18px; } } /* === CARDS === */ .pg-card { background: #ffffff; border-radius: 22px; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08); padding: 22px 24px 24px; position: relative; max-width: 100%; } .pg-main-card {} .pg-summary-card {} .pg-card-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; margin-top: 25px; } .pg-title { font-size: 22px; font-weight: 700; letter-spacing: 0.01em; } .pg-pill { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: #ecfdf3; color: #16a34a; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .pg-pill-dot { width: 8px; height: 8px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 8px #4ade80; } /* === STEPPER === */ .pg-stepper { display: flex; gap: 20px; margin: 0; padding: 0; align-items: center; justify-content: flex-end; user-select: none; } .pg-step { display: flex; align-items: center; gap: 7px; cursor: default; } .pg-step-circle { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); font-weight: 800; font-size: 14px; line-height: 1; } .pg-step.pg-step-active .pg-step-circle { border-color: rgba(var(--accent-rgb),0.9); background: rgba(var(--accent-rgb),0.95); color: #03110c; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.14); } .pg-step.pg-step-active span:last-child { color: rgba(255,255,255,0.92); } /* === PAYMENT TYPE GRID === */ .pg-section-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: #6b7280; margin-bottom: 10px; margin-top: 8px; } .pg-payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .pg-tile { border-radius: 18px; border: 1px solid #e5e7eb; padding: 12px 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; background: #fff; transition: all 0.17s ease-out; position: relative; max-width: 100%; } .pg-tile:hover { border-color: #d1d5db; box-shadow: 0 14px 40px rgba(15,23,42,0.06); transform: translateY(-1px); } .pg-tile.pg-tile-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 22px 50px rgba(var(--accent-rgb),0.24); } .pg-radio { width: 16px; height: 16px; border-radius: 999px; border: 2px solid #d1d5db; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pg-radio-dot { width: 8px; height: 8px; border-radius: 999px; background: transparent; } .pg-tile-active .pg-radio { border-color: var(--accent); } .pg-tile-active .pg-radio-dot { background: var(--accent); } .pg-tile-main { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; } .pg-tile-sub { font-size: 14px; color: #6b7280; margin-top: 3px; display: none; } .pg-tile[data-paymode="crypto"] .pg-tile-sub, .pg-tile[data-paymode="card"] .pg-tile-sub { display: block; } .pg-logo-chip { min-width: 34px; height: 22px; border-radius: 8px; background: #f3f4f6; color: #111827; border: 1px solid #d4d4d8; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .pg-tile-active .pg-logo-chip { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.4); } .pg-smile-icon { width: 26px; height: 26px; border-radius: 999px; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 18px rgba(var(--accent-rgb),0.7); overflow: hidden; } .pg-smile-icon img { width: 22px; height: 22px; border-radius: 999px; display: block; } /* === CRYPTO ROW === */ .pg-crypto-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; } .pg-asset-pill { border-radius: 14px; padding: 10px 12px; border: 1px solid #e5e7eb; display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; background: #fff; transition: all 0.17s ease-out; min-width: 0; } .pg-asset-pill:hover { border-color: #d1d5db; box-shadow: 0 4px 16px rgba(15,23,42,0.08); transform: translateY(-1px); } .pg-asset-pill.pg-asset-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 32px rgba(var(--accent-rgb),0.25); background: radial-gradient(circle at top left, rgba(var(--accent-rgb),0.09), #ffffff); } .pg-asset-symbol { width: 28px; height: 28px; border-radius: 999px; background: #e5e7eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .pg-asset-logo { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; display: block; } .pg-asset-pill.pg-asset-active .pg-asset-symbol { background: var(--accent); } .pg-asset-label-main { font-weight: 600; } .pg-asset-label-sub { font-size: 12px; color: #6b7280; line-height: 1.3; } @media (max-width: 960px) { .pg-crypto-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pg-crypto-meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 14px; margin-bottom: 12px; } .pg-crypto-meta-item { border-radius: 14px; border: 1px dashed rgba(var(--accent-rgb),0.3); background: rgba(var(--accent-rgb),0.03); padding: 9px 10px; font-size: 13px; } .pg-crypto-meta-label { color: var(--z-text-2) !important; text-transform: uppercase; letter-spacing: 0.09em; font-size: 12px; color: var(--z-text) !important; margin-bottom: 4px; } .pg-crypto-meta-value { color: var(--z-text) !important; font-weight: 600; font-size: 14px; color: var(--z-text) !important; display: flex; align-items: center; gap: 6px; } .pg-crypto-meta-note { color: var(--z-muted) !important; color: var(--z-text) !important; font-size: 12px; margin-top: 2px; } .pg-crypto-meta-change { font-size: 13px; font-weight: 600; } .pg-crypto-meta-change.pg-up { color: #16a34a; } .pg-crypto-meta-change.pg-down { color: #dc2626; } /* Volatility Banner */ .pg-volatility-note { text-align: center; font-weight: 600; font-size: 16px; color: #111827; padding: 14px 0; margin: 12px 0 18px; border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 8px; background: rgba(255,255,255,0.82); } .pg-volatility-note .mobile-break { display: none; } @media (max-width: 640px) { .pg-volatility-note { font-size: 14px; line-height: 1.32; padding: 12px 6px; } .pg-volatility-note .mobile-break { display: block; } } /* visual flow strip removed */ /* === FORMS === */ .pg-form { border-radius: 16px; border: 1px solid rgba(var(--accent-rgb),0.4); background: rgba(var(--accent-rgb),0.01); padding: 12px 14px 14px; margin-top: 10px; margin-bottom: 14px; } .pg-field { margin-bottom: 10px; } .pg-label { font-size: 13px; font-weight: 600; color: #4b5563; margin-bottom: 3px; display: inline-block; } .pg-required { color: #ef4444; margin-left: 2px; } .pg-input-row { display: flex; gap: 10px; } .pg-input, .pg-select { width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid #e5e7eb; font-size: 14px; outline: none; transition: all 0.15s ease-out; background: #f9fafb; } .pg-input:focus, .pg-select:focus { border-color: var(--accent); background: #ffffff; box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px rgba(var(--accent-rgb),0.16); } .pg-helper { font-size: 12px; color: #9ca3af; margin-top: 3px; } /* === MOBILE FORM STACKING FIX === */ @media (max-width: 640px) { .pg-form .pg-input-row { display: flex !important; flex-direction: column !important; gap: 8px; } .pg-form .pg-input-row > * { width: 100% !important; max-width: 100% !important; } .pg-form .pg-input-row.pg-phone-row { display: flex !important; flex-direction: row !important; gap: 10px; } .pg-form .pg-input-row.pg-phone-row > * { width: auto !important; max-width: 100% !important; flex: 1 1 auto; } .pg-form .pg-input-row.pg-phone-row > .pg-input:first-child { max-width: 90px; flex: 0 0 auto; } } /* === BUTTONS === */ .pg-button-row { margin-top: 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pg-btn { border-radius: 999px; padding: 10px 18px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s ease-out; white-space: nowrap; } .pg-btn-primary { background: linear-gradient(135deg, var(--accent), #fb56ff); color: #fff; box-shadow: 0 14px 34px rgba(var(--accent-rgb),0.4); } .pg-btn-primary:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 20px 50px rgba(var(--accent-rgb),0.55); } .pg-btn-ghost { background: transparent; color: #6b7280; } .pg-btn-ghost:hover { background: #f3f4f6; } .pg-btn-small { padding: 7px 12px; font-size: 13px; } /* === SUMMARY CARD === */ .pg-summary-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; } .pg-summary-sub { font-size: 14px; color: #6b7280; line-height: 1.5; margin-bottom: 10px; } .pg-summary-block { font-size: 14px; border-top: 1px dashed #e5e7eb; padding-top: 10px; margin-top: 6px; } .pg-summary-row { display: flex; justify-content: space-between; margin-bottom: 3px; } .pg-summary-row span:last-child { white-space: nowrap; } .pg-summary-total { border-top: 1px solid #e5e7eb; margin-top: 8px; padding-top: 6px; font-weight: 700; } /* === CALLOUT CARDS === */ .pg-callouts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .pg-callouts-mobile { display: none; } .pg-callout-card { border-radius: 16px; border: 1px solid #e5e7eb; padding: 10px 11px; font-size: 14px; background: #f9fafb; } .pg-callout-card.card-mode { background: #eff6ff; border-color: #bfdbfe; } .pg-callout-card.crypto-mode { background: #eef2ff; border-color: #a5b4fc; } .pg-callout-card.smile-mode { background: #fdf2ff; border-color: #f9a8ff; } .pg-callout-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; } .pg-callout-list { padding-left: 16px; margin: 0; list-style-position: inside; } .pg-callout-list li { margin-bottom: 3px; } .pg-callout-pill { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgba(34, 197, 94, 0.1); color: #16a34a; margin-top: 5px; } /* === MODAL === */ /* === CONNECT WALLET MODAL (DESKTOP/TABLET) — SoT v3 === */ /* The modal is anchored to the CUSTOMER container (same place billing drawer appears). */ #pg-customer { position: relative; } /* Gateway outline overlay frame (sits above dim overlay, below modal) */ #zs-gateway-outline-overlay{ position:fixed; left:0; top:0; width:0; height:0; background:transparent; pointer-events:none; z-index:99995; } .pg-modal{ /* LOCKED MODAL SHELL */ width:100%; height: var(--pg-modal-h, 471px); min-height: var(--pg-modal-h, 471px); max-height: var(--pg-modal-h, 471px); position:relative; overflow:hidden; box-sizing:border-box; /* QR sizing controls (single source of truth) */ --pg-qr-size: 147px; /* rendered QR pixels (Step 9) */ /* rendered QR pixels */ --pg-qr-board: 5px; /* white board padding (QR+10 = 157px) */ /* white board padding */ --pg-qr-outer-pad: 8.5px; /* outer frame padding (157 + 17 = 174px) */ /* teal outer frame padding */ border-radius:22px; background:rgba(0,0,0,0.24); border:1px solid rgba(255,255,255,0.08); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 32px rgba(var(--accent-rgb),0.22); } /* specular highlight */ .pg-modal::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(1200px 420px at 20% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0.08) 35%, rgba(255,255,255,0.0) 70%), radial-gradient(900px 300px at 80% 12%, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.0) 65%); mix-blend-mode: screen; opacity: 0.8; } .pg-modal-header{ height: 70px; padding: 18px 22px; border-top-left-radius: 12px; border-top-right-radius: 12px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(var(--accent-rgb),0.26), rgba(var(--accent-rgb),0.08) 55%, rgba(0,0,0,0)); } .pg-modal-hero{ font-size: 22px; letter-spacing: 5px; font-weight: 407px; text-transform: uppercase; color: rgba(255,255,255,0.92); line-height: 1.05; white-space: nowrap; } .pg-modal-timer-row{ margin-top: 10px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; display:flex; gap: 10px; align-items:center; color: rgba(255,255,255,0.72); } .pg-modal-timer{ color: #fb0505; font-weight: 400; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 18px rgba(0,0,0,0.55); } .pg-modal-timer-label{ display:inline-block !important; } .pg-modal.pg-wc-success #pg-modal-timer{ display:none !important; } .pg-modal-close-btn{ width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.85); font-weight: 700; cursor:pointer; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; } .pg-modal-close-btn:hover{ background: rgba(0,0,0,0.35); } .pg-modal-grid{ height: calc(100% - 96px); padding: 18px 22px 18px 22px; display:grid; grid-template-columns: 300px 1fr 420px; column-gap: 26px; align-items:start; } /* LEFT QR */ .pg-modal-asset-label{ font-size: 14px; letter-spacing: 4px; color: rgba(255,255,255,0.7); text-transform: uppercase; margin-bottom: 12px; } .pg-qr-outer{ width: calc(var(--pg-qr-size) + (var(--pg-qr-board) * 2) + (var(--pg-qr-outer-pad) * 2)); height: calc(var(--pg-qr-size) + (var(--pg-qr-board) * 2) + (var(--pg-qr-outer-pad) * 2)); padding: var(--pg-qr-outer-pad); border-radius:18px; position:relative; overflow:hidden; background: radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,0.20), rgba(255,255,255,0.02) 42%, rgba(16,190,175,0.14) 72%, rgba(16,190,175,0.10) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset, 0 0 20px rgba(16,190,175,0.22), 0 0 44px rgba(16,190,175,0.24), 0 18px 34px rgba(0,0,0,0.36), inset 0 0 2px rgba(var(--accent-rgb), 0.22); display:flex; align-items:center; justify-content:center; box-sizing:border-box; margin-right:30px; /* per SoT */ } .pg-qr-outer::before{ content:""; position:absolute; inset:-1px; border-radius:18px; background: linear-gradient(135deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.10) 18%, rgba(255,255,255,0.00) 44%, rgba(255,255,255,0.14) 74%, rgba(255,255,255,0.00) 100%); mix-blend-mode: screen; opacity:0.55; /* specular highlight */ pointer-events:none; } .pg-qr-outer::after{ content:""; position:absolute; inset:0; border-radius:18px; background: radial-gradient(70% 60% at 18% 22%, rgba(255,255,255,0.22), rgba(255,255,255,0.00) 60%), radial-gradient(90% 90% at 80% 95%, rgba(16,190,175,0.24), rgba(16,190,175,0.00) 62%); filter: blur(0.4px); opacity:0.85; /* cool lighting aura */ pointer-events:none; } .pg-qr-white{ width: calc(var(--pg-qr-size) + (var(--pg-qr-board) * 2)); height: calc(var(--pg-qr-size) + (var(--pg-qr-board) * 2)); padding: var(--pg-qr-board); border-radius:12px; background:#ffffff; position:relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset; display:flex; align-items:center; justify-content:center; box-sizing:border-box; } .pg-qr-img{ width: var(--pg-qr-size) !important; height: var(--pg-qr-size) !important; max-width: var(--pg-qr-size) !important; max-height: var(--pg-qr-size) !important; aspect-ratio: 1 / 1; display:block; image-rendering: pixelated; border-radius: 6px; } /* Center asset logo (default = white 2px circular border, NO glow) */ .pg-qr-center-logo{ width:40px; height:40px; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); border-radius:999px; border:2px solid #ffffff; box-sizing:border-box; padding:0; background:transparent; box-shadow: 0 10px 18px rgba(0,0,0,0.36); pointer-events:none; opacity:1; } /* Wallet-clicked view helpers */ .pg-wv-close{ position: absolute; top: -19px; right: -12px; width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.22); background: rgba(6,9,11,0.66); color: rgba(255,255,255,0.9); font-size: 18px; line-height: 2px; cursor: pointer; display:none; z-index:999; box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 12px 22px rgba(0,0,0,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } /* Wallet compatibility buttons (Wallet-clicked view only) */ .pg-wv-compat{ margin-top: 15px; display: none; justify-content: center; width: 100%; } .pg-modal.pg-wallet-view-active .pg-wv-compat{ display:flex; } .pg-wv-compat-track{ position: relative; transform: translateX(10px); display: flex; gap: 2px; padding: 4px; border-radius: 11px; background: rgba(8, 14, 22, 0.42); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 10px 24px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; } .pg-wv-compat-btn{ position: relative; z-index: 2; appearance: none; border: 0; background: transparent; color: rgba(255,255,255,0.78); font-size: 11px; letter-spacing: 0.5px; padding: 6px 10px; border-radius: 999px; cursor: pointer; transition: color .18s ease, transform .18s ease, filter .18s ease; user-select: none; white-space: nowrap; } .pg-wv-compat-btn:hover{ color: rgba(255,255,255,0.95); filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.40)); transform: translateY(-1px); } .pg-wv-compat-slider{ position: absolute; top: 6px; left: 6px; height: calc(100% - 12px); width: var(--pg-wv-slider-w, 70px); transform: translateX(var(--pg-wv-slider-x, 0px)); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(var(--accent-rgb),0.10) ); box-shadow: 0 0 22px rgba(var(--accent-rgb),0.34), 0 0 2px rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.18); transition: transform .18s ease, width .18s ease, opacity .18s ease; z-index: 1; opacity: 0.92; } .pg-wv-close:hover{ transform: translateY(-1px); border-color: rgba(var(--accent-rgb),0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset, 0 0 22px rgba(var(--accent-rgb),0.25), 0 14px 26px rgba(0,0,0,0.40); } .pg-wallet-view-active .pg-wv-close{ display:block; } /* Blur the placeholder wallet QR so it can't be scanned */ .pg-wallet-view-active .pg-qr-outer{ overflow: visible; } .pg-wallet-view-active .pg-wv-compat{ transform: translateX(-80px); } #pg-modal-qr.pg-wallet-qr{ filter: blur(3px); transform: translateZ(0); } /* Loading state: animate ONLY the center logo while QR is preloading */ .pg-qr-white.pg-qr-loading .pg-qr-center-logo{ animation: pgAssetPulse 0.5s ease-in-out 1 both; filter: none; } .pg-qr-white.pg-qr-loading .pg-qr-img{ opacity:0; visibility:hidden; } .pg-qr-img{ opacity:1; visibility:visible; transition: opacity 25ms ease; } @keyframes pgAssetPulse{ 0%{ transform: translate(-50%,-50%) scale(1); filter: blur(0px); box-shadow: 0 10px 18px rgba(0,0,0,0.36); } 45%{ transform: translate(-50%,-50%) scale(3.5); /* ~140px visual burst */ filter: blur(2.5px); box-shadow: 0 0 0 8px rgba(255,255,255,0.10), 0 0 34px rgba(var(--accent-rgb),0.55), 0 0 68px rgba(var(--accent-rgb),0.38), 0 24px 34px rgba(0,0,0,0.30); } 100%{ transform: translate(-50%,-50%) scale(1); filter: blur(0px); box-shadow: 0 10px 18px rgba(0,0,0,0.36); } } .pg-qr-caption{ margin-top: 14px; font-size: 14px; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,0.72); width: calc(var(--pg-qr-size) + (var(--pg-qr-board) * 2)); /* match white board width */ text-align: center; margin-left: auto; margin-right: auto; white-space: nowrap; line-height: 1; transform: translateX(-63px); } /* FEATURED wallets */ .pg-modal-section-title{ font-size: 17px; letter-spacing: 4px; font-weight: 200; color: rgba(255,255,255,0.9); margin: 8px 0 14px; text-align:left; transform: translateX(10px); } .pg-featured-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.5px 19px; align-content:start; justify-items:start; transform: translateX(10px); } /* STEP 24: Align modal columns with Featured Wallets + Order Details (Desktop/Tablet only) */ @media (min-width: 521px){ .pg-modal-col-wallets{ transform: translateX(-145px); } .pg-modal-col-details{ transform: translateX(-140px); } } .pg-featured-tile{ background: transparent; border: none; padding: 0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap: 8px; width: 67px; /* match tile frame width for consistent label truncation */ } .pg-featured-frame{ width: 67px; /* 62 + 10*2 */ height: 67px; padding:10px; border-radius: 12px; /* ~5% */ background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 22px rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center; } .pg-featured-logo{ width:47px; height:47px; display:block; border-radius: 10px; } .pg-featured-name{ font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.78); letter-spacing: 0.6px; max-width: 67px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:center; line-height: 1.1; user-select:none; } /* STEP 25: Featured wallets bottom row spacing */ .pg-featured-grid .pg-featured-tile:nth-child(n+4){ margin-top: 10px; /* move ONLY the bottom row down */ } /* STEP 25: Medium hover aura on each tile */ .pg-featured-tile:hover .pg-featured-logo{ filter: drop-shadow(0 0 12px rgba(var(--accent-rgb),0.35)); } .pg-featured-tile:hover .pg-featured-frame{ border-color: rgba(var(--accent-rgb),0.58); box-shadow: 0 0 0 1px rgba(255,255,255,0.07) inset, 0 0 18px rgba(var(--accent-rgb),0.20), 0 10px 22px rgba(0,0,0,0.35); } .pg-modal-cancel-row{ margin-top: 18px; font-size: 14px; color: rgba(255,255,255,0.65); display:none !important; } /* ORDER DETAILS (right) */ .pg-order-card{ width: 86%; border-radius: 16px; background: rgba(0,0,0,0.36); border: 1px solid rgba(255,255,255,0.10); padding: 16px 18px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; } /* ============================ ORDER COMPLETE (Connect Wallet Modal) — UI ONLY - No Radom/WC core logic changes ============================ */ .pg-modal-grid{ position: relative; } /* Success layer covers LEFT + FEATURED columns (keeps Order Details visible) */ .pg-wc-success-layer{ grid-column: 1 / 3; grid-row: 1; height: 100%; border-radius: 18px; background: radial-gradient(120% 120% at 50% 30%, rgba(var(--accent-rgb),0.16), rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.00) 70%); display:none; align-items:center; justify-content:center; overflow:hidden; position: relative; } .pg-wc-success-inner{ width: 92%; height: 88%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 14px; position: relative; } .pg-wc-check-wrap{ width: 301px; height: 301px; border-radius: 999px; position: relative; display:flex; align-items:center; justify-content:center; filter: drop-shadow(0 0 26px rgba(var(--accent-rgb),0.22)); } .pg-wc-aurora-ring{ position:absolute; inset: -18px; border-radius: 999px; background: radial-gradient(closest-side at 35% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 45%), conic-gradient(from 200deg, rgba(var(--accent-rgb),0.00), rgba(var(--accent-rgb),0.40), rgba(255,255,255,0.08), rgba(var(--accent-rgb),0.24), rgba(var(--accent-rgb),0.00)); opacity: 0.47; filter: blur(8px); animation: pgAuroraSpin 18s linear infinite; } @keyframes pgAuroraSpin{ to{ transform: rotate(360deg);} } .pg-wc-check-svg{ width: 210px; height: 210px; margin-top: 80px; z-index: 2; } .pg-wc-check-glow{ filter: drop-shadow(0 0 22px rgba(var(--accent-rgb),0.55)) drop-shadow(0 0 44px rgba(var(--accent-rgb),0.24)); } .pg-wc-specular{ position:absolute; width: 120px; height: 120px; margin-top: 80px; border-radius: 999px; top: 36px; left: 56px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.36), rgba(255,255,255,0.00) 62%); transform: rotate(-12deg); filter: blur(2px); z-index: 3; mix-blend-mode: screen; pointer-events:none; } .pg-wc-assets-row{ display:flex; align-items:center; gap: 12px; margin-top: 2px; } .pg-wc-assets-row{ position: relative; } .pg-wc-flow-beam{ position:absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 28px; pointer-events:none; opacity: 0; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.00), rgba(var(--accent-rgb),0.42), rgba(var(--accent-rgb),0.00)); filter: blur(10px); } /* ========================================================== ORDER COMPLETE — Option B (Flow + Rewards Hero) - Animation only (no layout shifts) - Driven by stage classes added in enterOrderCompleteUI() .pg-flow-s1 -> paid tile charges .pg-flow-s2 -> lock engages + beam sweep .pg-flow-s3 -> ZLNC tile bloom .pg-flow-s4 -> rewards row hero pop ========================================================== */ /* Base: keep beam hidden unless a stage is active */ .pg-modal.pg-wc-success .pg-wc-flow-beam{ opacity:0; } /* Particle ride-along + micro sparks (no extra DOM nodes) */ .pg-wc-flow-beam::before, .pg-wc-flow-beam::after{ content:""; position:absolute; top: 50%; left: 0; width: 18px; height: 18px; transform: translate(-40px,-50%); border-radius: 999px; opacity: 0; pointer-events:none; } .pg-wc-flow-beam::before{ background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(var(--accent-rgb),0.65) 35%, rgba(var(--accent-rgb),0.08) 70%, rgba(var(--accent-rgb),0.00) 100%); filter: blur(0.2px); box-shadow: 0 0 14px rgba(var(--accent-rgb),0.42), 0 0 28px rgba(var(--accent-rgb),0.20); } .pg-wc-flow-beam::after{ width: 44px; height: 44px; background: radial-gradient(circle, rgba(var(--accent-rgb),0.22) 0%, rgba(var(--accent-rgb),0.08) 30%, rgba(var(--accent-rgb),0.00) 70%); filter: blur(1px); mix-blend-mode: screen; } /* Subtle focus pulse (keeps user oriented; no layout changes) */ @keyframes pgFocusPulse{ 0%{ box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); } 60%{ box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.22) inset, 0 0 22px rgba(var(--accent-rgb),0.22), 0 10px 18px rgba(0,0,0,0.35); } 100%{ box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); } } /* Stage 1: "charge" the paid tile */ .pg-modal.pg-flow-s1 .pg-wc-asset-paid{ animation: pgChargeUp 1.05s cubic-bezier(.2,.9,.2,1) 1, pgFocusPulse 1.20s ease-in-out 1; } .pg-modal.pg-flow-s1 #pg-wc-asset-paid-logo{ animation: pgLogoNudge 1.05s ease-out 1; } /* Stage 2: lock engages + beam sweep + particle run */ .pg-modal.pg-flow-s2 .pg-wc-asset-lock{ animation: pgLockEngage 1.10s cubic-bezier(.2,.9,.2,1) 1, pgFocusPulse 1.20s ease-in-out 1; } .pg-modal.pg-flow-s2 .pg-wc-asset-lock svg{ animation: pgLockSpin 1.20s ease-in-out 1; transform-origin: 50% 50%; } .pg-modal.pg-flow-s2 .pg-wc-flow-beam{ opacity: 1; animation: pgFlowBeamSweep 1.60s ease-in-out 1; } .pg-modal.pg-flow-s2 .pg-wc-flow-beam::before{ animation: pgFlowParticle 1.60s ease-in-out 1; } .pg-modal.pg-flow-s2 .pg-wc-flow-beam::after{ animation: pgFlowSpark 1.60s ease-in-out 1; } /* Stage 3: ZLNC tile blooms */ .pg-modal.pg-flow-s3 .pg-wc-asset-reward{ animation: pgRewardBloom 1.15s cubic-bezier(.2,.9,.2,1) 1, pgFocusPulse 1.20s ease-in-out 1; } .pg-modal.pg-flow-s3 #pg-wc-asset-reward-logo{ animation: pgRewardShimmer 1.25s ease-in-out 1; } /* Stage 4: rewards hero */ .pg-modal.pg-flow-s4 .pg-oc-rewards-row, .pg-modal.pg-flow-s4 #pg-oc-rewards-row{ animation: pgRewardsHero 1.25s cubic-bezier(.18,.98,.18,1) 1, pgFocusPulse 1.20s ease-in-out 1; } .pg-modal.pg-flow-s4 #pg-oc-rewards{ animation: pgRewardsTextPop 1.05s cubic-bezier(.18,.98,.18,1) 1; } /* Keyframes */ @keyframes pgChargeUp{ 0%{ transform: translateY(0) scale(1); border-color: rgba(255,255,255,0.14); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); } 55%{ transform: translateY(-1px) scale(1.02); border-color: rgba(var(--accent-rgb),0.65); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.22) inset, 0 0 22px rgba(var(--accent-rgb),0.24), 0 10px 18px rgba(0,0,0,0.35); } 100%{ transform: translateY(0) scale(1); border-color: rgba(255,255,255,0.18); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); } } @keyframes pgLogoNudge{ 0%{ transform: translateZ(0) scale(1); filter: drop-shadow(0 0 0 rgba(var(--accent-rgb),0)); } 55%{ transform: translateZ(0) scale(1.08); filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.32)); } 100%{ transform: translateZ(0) scale(1); filter: drop-shadow(0 0 0 rgba(var(--accent-rgb),0)); } } @keyframes pgLockEngage{ 0%{ transform: translateY(0) scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); } 45%{ transform: translateY(-1px) scale(1.04); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.20) inset, 0 0 26px rgba(var(--accent-rgb),0.22), 0 10px 18px rgba(0,0,0,0.35); } 100%{ transform: translateY(0) scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); } } @keyframes pgLockSpin{ 0%{ transform: rotate(0deg) scale(1); } 55%{ transform: rotate(10deg) scale(1.06); } 100%{ transform: rotate(0deg) scale(1); } } @keyframes pgFlowBeamSweep{ 0%{ opacity:0; transform: translate(-40%, -50%); } 12%{ opacity:0.75; } 65%{ opacity:0.55; } 100%{ opacity:0; transform: translate(40%, -50%); } } @keyframes pgFlowParticle{ 0%{ opacity:0; transform: translate(-40px,-50%) scale(0.70); } 12%{ opacity:1; } 55%{ opacity:1; transform: translate(calc(50% - 9px),-50%) scale(1); } 100%{ opacity:0; transform: translate(calc(100% + 40px),-50%) scale(0.80); } } @keyframes pgFlowSpark{ 0%{ opacity:0; transform: translate(-40px,-50%) scale(0.6); } 18%{ opacity:0.55; } 55%{ opacity:0.42; transform: translate(calc(50% - 22px),-50%) scale(1); } 100%{ opacity:0; transform: translate(calc(100% + 40px),-50%) scale(0.7); } } @keyframes pgRewardBloom{ 0%{ transform: translateY(0) scale(1); border-color: rgba(255,255,255,0.18); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); } 55%{ transform: translateY(-1px) scale(1.06); border-color: rgba(var(--accent-rgb),0.80); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.26) inset, 0 0 34px rgba(var(--accent-rgb),0.42), 0 10px 18px rgba(0,0,0,0.35); } 100%{ transform: translateY(0) scale(1); border-color: rgba(255,255,255,0.18); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); } } @keyframes pgRewardShimmer{ 0%{ filter: drop-shadow(0 0 0 rgba(var(--accent-rgb),0)); transform: scale(1); } 45%{ filter: drop-shadow(0 0 14px rgba(var(--accent-rgb),0.38)); transform: scale(1.08); } 100%{ filter: drop-shadow(0 0 0 rgba(var(--accent-rgb),0)); transform: scale(1); } } @keyframes pgRewardsHero{ 0%{ transform: translateY(0) scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; border-color: rgba(255,255,255,0.18); } 35%{ transform: translateY(-1px) scale(1.015); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.22) inset, 0 0 26px rgba(var(--accent-rgb),0.20); border-color: rgba(var(--accent-rgb),0.55); } 100%{ transform: translateY(0) scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; border-color: rgba(255,255,255,0.18); } } @keyframes pgRewardsTextPop{ 0%{ transform: translateY(0) scale(1); letter-spacing: 0.02em; } 45%{ transform: translateY(-1px) scale(1.03); letter-spacing: 0.03em; text-shadow: 0 0 14px rgba(var(--accent-rgb),0.36); } 100%{ transform: translateY(0) scale(1); letter-spacing: 0.02em; text-shadow: none; } } /* PATCH: removed stray orphaned keyframe steps (was breaking CSS parsing) */ /* 40%{ box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.22) inset, 0 0 18px rgba(var(--accent-rgb),0.22), 0 10px 18px rgba(0,0,0,0.35); border-color: rgba(var(--accent-rgb),0.55); } */ /* 100%{ box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.18); } */ /* } */ /* Rewards fade-in after flow completes */ .pg-modal.pg-wc-success #pg-oc-rewards-row{ opacity: 0; transform: translateY(4px); transition: opacity 420ms ease, transform 420ms ease; } .pg-modal.pg-wc-success.pg-rewards-ready #pg-oc-rewards-row{ opacity: 1; transform: translateY(0); } .pg-wc-asset-tile{ width: 50px; height: 50px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 18px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow:hidden; } .pg-wc-asset-tile img{ width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(0,0,0,0.35)); } /* Force paid-asset logo visibility inside success layer (some browsers were not painting the IMG) */ .pg-wc-asset-tile.pg-wc-asset-paid img{ display:block !important; opacity:1 !important; visibility:visible !important; position:relative !important; z-index:3 !important; filter:none !important; } .pg-wc-asset-link{ width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),0.36); background: rgba(0,0,0,0.26); display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 18px rgba(var(--accent-rgb),0.24); position: relative; overflow:hidden; } .pg-wc-asset-link:before{ content:""; position:absolute; inset:-40%; background: conic-gradient(from 0deg, rgba(var(--accent-rgb),0.00), rgba(var(--accent-rgb),0.32), rgba(var(--accent-rgb),0.00)); animation: pgLinkSpin 1.8s linear infinite; filter: blur(10px); opacity: 0.85; } @keyframes pgLinkSpin{ to{ transform: rotate(360deg);} } .pg-wc-asset-link svg{ width: 18px; height: 18px; z-index: 2; opacity: 0.92; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.30)); } .pg-wc-success-caption{ margin-top: 8px; font-size: 18px; letter-spacing: 3px; color: rgba(255,255,255,0.92); text-transform: uppercase; text-shadow: 0 0 18px rgba(var(--accent-rgb),0.24); } .pg-wc-rewards-micro{ font-size: 12px; letter-spacing: 1.2px; color: rgba(255,255,255,0.70); text-transform: uppercase; margin-top: -4px; display:flex; align-items:center; gap:8px; } .pg-wc-rewards-dot{ width: 10px; height: 10px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.24); border-top-color: rgba(var(--accent-rgb),0.72); animation: pgSpinner 0.85s linear infinite; } @keyframes pgSpinner{ to{ transform: rotate(360deg);} } /* Toggle states */ .pg-modal.pg-wc-success .pg-modal-col-qr, .pg-modal.pg-wc-success .pg-modal-col-wallets{ display:none; } .pg-modal.pg-wc-success #pg-wc-success-layer{ display:flex; } .pg-order-complete-panel{ display:none; } .pg-modal.pg-wc-success .pg-order-details-panel{ display:none; } .pg-modal.pg-wc-success .pg-wallet-search-panel{ display:none; } .pg-modal.pg-wc-success .pg-order-complete-panel{ display:block; } /* Keep Order Complete card aligned with original Order Details column */ @media (min-width: 521px){ /* Shift ONLY the SUCCESS CARD; Order Details remains locked in normal state */ .pg-modal.pg-wc-success #pg-order-card{ transform: translateX(212.9px); } .pg-modal.pg-wc-success #pg-order-complete-panel{ transform:none; } } /* === WALLET SEARCH (Find Your Wallet) — Desktop/Tablet ONLY === */ @media (min-width: 521px){ .pg-wallet-search-panel{ display:none; } .pg-modal.pg-wallet-search-active .pg-order-details-panel{ display:none; } .pg-modal.pg-wallet-search-active .pg-wallet-search-panel{ display:flex; flex-direction:column; gap:10px; } .pg-modal.pg-wallet-search-active .pg-order-card{ padding:10px; } .pg-wallet-search-top{ display:flex; gap:10px; align-items:center; } .pg-wallet-search-field{ position:relative; flex:1; } .pg-wallet-search-ico{ position:absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0.85; pointer-events:none; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.25)); } .pg-wallet-search-input{ width:100%; height: 42px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.36); color: rgba(255,255,255,0.92); font-size: 14px; letter-spacing: 1px; padding: 0 12px 0 40px; outline: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pg-wallet-search-input::placeholder{ color: rgba(255,255,255,0.72); letter-spacing: 1px; } .pg-wallet-search-input:focus{ border-color: rgba(var(--accent-rgb),0.55); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.22) inset, 0 0 22px rgba(var(--accent-rgb),0.22), 0 0 0 1px rgba(255,255,255,0.06) inset; } .pg-wallet-search-close{ width: 42px; height: 42px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.36); color: rgba(255,255,255,0.90); font-weight: 700; cursor:pointer; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pg-wallet-search-close:hover{ background: rgba(0,0,0,0.36); border-color: rgba(var(--accent-rgb),0.58); box-shadow: 0 0 0 1px rgba(255,255,255,0.07) inset, 0 0 18px rgba(var(--accent-rgb),0.20), 0 10px 22px rgba(0,0,0,0.35); } .pg-wallet-search-scroll-wrap{ position:relative; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 14px 26px rgba(0,0,0,0.32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px; /* 10px between wallets and outline */ overflow:hidden; } .pg-wallet-search-scroll{ height: 194px; /* ~2 rows + partial 3rd (reduced by 60px) */ overflow:auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.24) rgba(0,0,0,0.0); } .pg-wallet-search-scroll::-webkit-scrollbar{ width: 10px; } .pg-wallet-search-scroll::-webkit-scrollbar-track{ background: rgba(0,0,0,0.0); border-radius: 12px; } .pg-wallet-search-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); border-radius: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset, 0 0 18px rgba(var(--accent-rgb),0.18); } .pg-wallet-search-scroll::-webkit-scrollbar-thumb:active{ background: rgba(255,255,255,0.22); box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset, 0 0 26px rgba(var(--accent-rgb),0.30); } .pg-wallet-search-scroll-wrap::after{ content:""; position:absolute; left:0; right:0; bottom:0; height: 40px; /* blur reveal */ pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.32)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pg-wallet-search-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px 12px; align-content:start; justify-items:center; } .pg-search-tile{ background: transparent; border: none; padding: 0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap: 6px; width: 56px; /* frame width for label truncation */ } .pg-search-frame{ width: 54px; /* ~80% of 67px */ height: 54px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 22px rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center; } .pg-search-logo{ width: 38px; height: 38px; display:block; border-radius: 8px; } .pg-search-name{ font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.82); letter-spacing: 1px; max-width: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:center; line-height: 1.1; user-select:none; } .pg-search-tile:hover .pg-search-logo{ filter: drop-shadow(0 0 12px rgba(var(--accent-rgb),0.35)); } .pg-search-tile:hover .pg-search-frame{ border-color: rgba(var(--accent-rgb),0.58); box-shadow: 0 0 0 1px rgba(255,255,255,0.07) inset, 0 0 18px rgba(var(--accent-rgb),0.20), 0 10px 22px rgba(0,0,0,0.35); } } .pg-order-title{ font-size: 17px; font-weight: 500; letter-spacing: 4px; margin-bottom: 12px; color: rgba(255,255,255,0.9); } /* ORDER DETAILS (modal) — Step 26: new data layout */ .pg-order-title{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .pg-order-title-text{ display:block; } .pg-order-brand{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; line-height:1; font-size:12px; font-weight:400; letter-spacing:1.5px; color:#ffffff; text-transform:uppercase; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.55)); opacity:0.95; margin-top:2px; } .pg-order-brand-top{ margin-bottom:1px; } .pg-order-brand-bottom{ margin-top:-1px; } .pg-od-rows{ display:flex; flex-direction:column; gap:10px; } .pg-od-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:14px; line-height:1.25; } .pg-od-k{ color: rgba(255,255,255,0.72); font-weight:400; letter-spacing:0.2px; white-space:nowrap; } .pg-od-v{ color: rgba(255,255,255,0.92); font-weight:500; text-align:right; max-width: 58%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pg-od-total{ font-weight:600; } .pg-od-divider{ height:1px; background: rgba(255,255,255,0.10); margin: 6px 0 2px; } .pg-od-row-rewards .pg-od-k, .pg-od-row-rewards .pg-od-v{ font-size:15px; } .pg-od-legacy{ position:absolute !important; left:-99999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; } .pg-order-rows{ display:flex; flex-direction:column; gap: 10px; } .pg-order-row{ display:flex; justify-content:space-between; gap: 14px; font-size: 14px; color: rgba(255,255,255,0.78); } .pg-order-k{ color: rgba(255,255,255,0.68); } .pg-order-v{ color: rgba(255,255,255,0.90); font-weight: 600; text-align:right; max-width: 260px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-payaddr{ margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); } .pg-payaddr-label{ font-size: 13px; color: rgba(255,255,255,0.68); margin-bottom: 8px; } .pg-payaddr-row{ display:flex; gap: 10px; align-items:center; } .pg-payaddr-input{ flex:1; height: 44px; display:flex; align-items:center; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.22); color: rgba(255,255,255,0.82); font-size: 13px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-payaddr-copy{ height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),0.55); background: rgba(var(--accent-rgb),0.18); color: rgba(255,255,255,0.9); cursor:pointer; box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; } .pg-payaddr-copy:hover{ background: rgba(var(--accent-rgb),0.24); } .pg-modal-status{ margin-top: 12px; font-size: 13px; color: rgba(255,255,255,0.66); } /* Ensure no scrollbars inside modal */ .pg-modal, .pg-modal-grid { overflow: hidden; } .pg-modal-backdrop{ /* FULL-SCREEN DIM OVERLAY (order-summary + modal + outline sit above) */ position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.80); padding: 0; overflow: hidden; z-index: 9998; display: none; } .pg-modal { height: var(--pg-modal-h, 541px); width:100%; background: radial-gradient(circle at top, rgba(var(--accent-rgb),0.07), #020617); color: #e5e7eb; border-radius: 22px; padding: 20px 20px 18px; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7); border: 1px solid rgba(148,163,184,0.4); } .pg-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .pg-modal-title { font-size: 17px; font-weight: 700; } .pg-badge-sm { font-size: 12px; padding: 3px 7px; border-radius: 999px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(148,163,184,0.7); } .pg-modal-body { font-size: 14px; } .pg-wallet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; margin-bottom: 12px; } .pg-wallet-btn { border-radius: 14px; border: 1px solid rgba(148,163,184,0.7); padding: 8px 7px; font-size: 13px; cursor: pointer; background: rgba(15,23,42,0.96); color: #e5e7eb; display: flex; align-items: center; justify-content: center; text-align: center; transition: all 0.15s ease-out; } .pg-wallet-btn:hover { background: rgba(30,64,175,0.85); border-color: #60a5fa; transform: translateY(-1px); } .pg-modal-row { display: flex; gap: 12px; margin-top: 10px; align-items: center; flex-wrap: wrap; } .pg-qr-placeholder { width: 110px; height: 110px; border-radius: 18px; border: 1px dashed rgba(148,163,184,0.7); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #9ca3af; background: rgba(15,23,42,0.9); flex-shrink: 0; } .pg-modal-meta { font-size: 13px; color: #cbd5f5; flex: 1 1 0; min-width: 0; } .pg-modal-meta strong { color: #f9fafb; } .pg-modal-flow { font-size: 12px; margin-top: 4px; color: #9ca3af; } .pg-timer { font-size: 13px; color: #fed7aa; margin-top: 4px; } .pg-modal-footer { margin-top: 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; } .pg-close { cursor: pointer; font-size: 18px; } .pg-success-banner { margin-top: 14px; border-radius: 18px; background: #ecfdf5; padding: 12px 12px; font-size: 14px; display: none; } .pg-success-title { font-weight: 700; margin-bottom: 4px; } .pg-success-sub { font-size: 13px; color: #047857; } /* === MOBILE-ONLY TWEAKS === */ @media (max-width: 960px) { .pg-summary-card { order: -1; } .pg-main-card { order: 0; } .pg-summary-card .pg-callouts { display: none; } .pg-callouts-mobile { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } } @media (max-width: 640px) { #crypto-gateway-demo-root { padding: 0; } .pg-layout { max-width: 100%; margin: 0; } .pg-card { border-radius: 0; box-shadow: none; padding: 16px 14px; } .pg-stepper { font-size: 12px; } /* Hide legacy rewards input field on MOBILE (we're replacing it with the new Rewards Panel) */ .pg-rewards-field{ display:none !important; } /* Prevent any Billing Address flash on mobile refresh */ #pg-card-billing{ display:none !important; } /* ========================================================= STEP 67 — MOBILE ONLY: REWARDS PANEL (pg-rewards-code) Goal: - Match the "Direction A with a hint of energy" render (no stars) - 333px x 160px card, elegant inner glow, ghost-outline fade (left 1/4) - Fused input + Apply button with gradient merge Scope: MOBILE ONLY (<= 640px). Desktop/Tablet untouched. ========================================================= */ #pg-rewards-code.pg-rw-card:not(.is-code-open){ /* CLOSED STATE ONLY (MOBILE): mirror DevTools final look */ position: relative; overflow: hidden; isolation: isolate; /* Flat charcoal fill (no tint / no glass gradients) */ background-color: #0b0f13 !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* No border stroke (outline is handled by box-shadow hairlines) */ border: none !important; /* Sharper edge definition (matches computed) */ box-shadow: 0 10px 22px rgba(0,0,0,0.62), 0 0 0 1px rgba(var(--accent-rgb),0.20), inset 0 -1px 0 rgba(0,0,0,0.58), inset 0 0 0 1px rgba(255,255,255,0.06) !important; /* Reduce GPU text/edge blur on mobile */ transform: translateZ(0); -webkit-transform: translateZ(0); } #pg-rewards-code.pg-rw-card.is-code-open::before, #pg-rewards-code.pg-rw-card.is-code-open::after{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; } /* Neutral inner edge highlight (cool white) */ #pg-rewards-code.pg-rw-card.is-code-open::before{ inset: 1px; border-radius: 7px; /* Inner glass + bright line highlights to frame the container */ background: /* TOP: hairline highlight — MATCHES bottom (no glow / no diffusion) */ linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.30) 20%, rgba(255,255,255,0.30) 80%, rgba(255,255,255,0.00) 100%) 0 0/100% 1px no-repeat, /* Corner wisps (tight + controlled) — keep right-corner hit */ radial-gradient(34px 14px at 8% 6px, rgba(255,255,255,0.28), rgba(255,255,255,0.00) 72%), radial-gradient(34px 14px at 92% 6px, rgba(255,255,255,0.28), rgba(255,255,255,0.00) 72%), /* Drawer separator (locks to bottom so it stays correct in CLOSED + OPEN) */ linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.26) 18%, rgba(255,255,255,0.26) 82%, rgba(255,255,255,0.00) 100%) 0 calc(100% - 44px)/100% 1px no-repeat, /* Drawer "lip" highlight (small line just inside the plate) */ linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.14) 22%, rgba(255,255,255,0.14) 78%, rgba(255,255,255,0.00) 100%) 0 calc(100% - 40px)/100% 1px no-repeat, /* BOTTOM framing line (stronger to match the design reference) */ linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.30) 20%, rgba(255,255,255,0.30) 80%, rgba(255,255,255,0.00) 100%) 0 100%/100% 1px no-repeat, /* Soft inner edge highlight */ linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.035) 48%, rgba(0,0,0,0.00) 76%) 0 0/100% 100% no-repeat; opacity: 0.96; filter: none; } /* Localized specular "hits" on the stroke (white-ish, NOT brand) */ #pg-rewards-code.pg-rw-card.is-code-open::after{ /* Specular hits + subtle spectral sheen (neutral white) */ background: radial-gradient(22px 22px at 92% 18%, rgba(255,255,255,0.34), rgba(255,255,255,0.00) 74%), radial-gradient(28px 28px at 92% 86%, rgba(255,255,255,0.20), rgba(255,255,255,0.00) 76%), radial-gradient(22px 22px at 10% 18%, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 74%), /* bottom-center hit to subtly "announce" the drawer area */ radial-gradient(46px 22px at 50% 96%, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 70%), /* soft side bloom */ radial-gradient(260px 140px at 100% 50%, rgba(255,255,255,0.065), rgba(255,255,255,0.00) 62%); opacity: 0.64; mix-blend-mode: screen; } #pg-rewards-code{ display:block !important; /* Match #pg-order-summary full-bleed width on MOBILE */ width: calc(100% + 28px); max-width: none; height: 74px; /* Move up 25px from prior placement (38px -> 13px) */ margin: 13px -14px 38px -14px; /* Match bottom corner radius of #pg-order-summary (18px) */ border-radius: 12px; position: relative; /* Pill + bottom glow position control (MOBILE) */ /* +value moves DOWN, -value moves UP */ --pg-rw-indicator-shift: -24px; overflow: visible; padding: 14px 16px 12px; box-sizing: border-box; /* Expand-on-demand (Rewards code drawer) */ transition: height 260ms cubic-bezier(.2,.9,.2,1), transform 220ms ease; will-change: transform; /* Smoky glass charcoal */ background: /* TOP: crisp 2px highlight + soft “white wisp” underlay (no blur) */ linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.42) 14%, rgba(255,255,255,0.42) 86%, rgba(255,255,255,0.00) 100%) 0 0/100% 2px no-repeat, linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.00) 70%) 0 0/100% -10px no-repeat, /* Glass body */ radial-gradient(160% 200% at 20% -10%, rgba(255,255,255,0.030), rgba(0,0,0,0) 55%), radial-gradient(190% 240% at 85% 18%, rgba(255,255,255,0.045), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,0.016) 0%, rgba(0,0,0,0.06) 48%, rgba(0,0,0,0.18) 100%), rgba(7,10,11,0.985); backdrop-filter: blur(14px) saturate(0.55); -webkit-backdrop-filter: blur(14px) saturate(0.55); /* Brand outline (closed state) */ border: 1px solid rgba(var(--accent-rgb),0.80); isolation: isolate; /* Inner glow, NOT loud */ box-shadow: 0 14px 32px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 10px 26px rgba(0,0,0,0.40), inset 0 -18px 28px rgba(255,255,255,0.02); } /* RESTORED DATA STYLES (mobile-only) */ #pg-rewards-code .pg-rw-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; margin-bottom: 8px; position: relative; z-index: 2; } /* Open-state asset meta row (ZLNC / BASE mainnet) — hidden when collapsed */ #pg-rewards-code .pg-rw-assetmeta{ display:flex; align-items:center; gap: 10px; margin: -4px 0 8px; padding: 0; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(-6px); pointer-events: none; transition: max-height 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease, transform 260ms cubic-bezier(.2,.9,.2,1); } #pg-rewards-code .pg-rw-zlogo{ width: 18px; height: 18px; border-radius: 6px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.26)) drop-shadow(0 10px 18px rgba(0,0,0,0.55)); opacity: 1; flex: 0 0 auto; } #pg-rewards-code .pg-rw-assetmeta-text{ min-width: 0; } #pg-rewards-code .pg-rw-assetmeta-top{ display:flex; align-items:baseline; gap: 10px; white-space: nowrap; } #pg-rewards-code .pg-rw-asset-ticker{ font-size: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 12px 26px rgba(0,0,0,0.55); } #pg-rewards-code .pg-rw-asset-net{ font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.62); text-shadow: 0 12px 26px rgba(0,0,0,0.55); } /* Reveal meta row only on expand */ #pg-rewards-code.is-code-open .pg-rw-assetmeta{ opacity: 1; max-height: 28px; transform: none; pointer-events: auto; } #pg-rewards-code .pg-rw-title{ font-size: 18px; margin-top: -7px; font-weight: 650; letter-spacing: 0.2px; color: rgba(255,255,255,0.92); text-shadow: 0 10px 22px rgba(0,0,0,0.55); } #pg-rewards-code .pg-rw-usd{ font-size: 18px; font-weight: 400; color: rgba(255,255,255,0.96); text-shadow: 0 12px 26px rgba(0,0,0,0.55), 0 0 14px rgba(255,255,255,0.10); margin-top: -7px; white-space: nowrap; } #pg-rewards-code .pg-rw-mid{ display:flex; justify-content:space-between; gap: 16px; margin: 0; position: relative; z-index: 2; /* CLOSED state: hidden (SoT closed = title + value only) */ opacity: 0; max-height: 0; overflow: hidden; transform: translateY(-6px); pointer-events: none; transition: max-height 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease, transform 260ms cubic-bezier(.2,.9,.2,1); } #pg-rewards-code .pg-rw-block{ min-width: 0; } #pg-rewards-code .pg-rw-right{ text-align: right; } #pg-rewards-code .pg-rw-label{ font-size: 13px; color: rgba(255,255,255,0.62); letter-spacing: 0.4px; margin-bottom: -2px; } #pg-rewards-code .pg-rw-price, #pg-rewards-code .pg-rw-amt{ font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.92); line-height: 1.05; text-shadow: 0 10px 22px rgba(0,0,0,0.55); } #pg-rewards-code .pg-rw-change{ margin-top: 4px; font-size: 14px; font-weight: 700; display:inline-flex; gap: 6px; align-items:center; line-height: 1; letter-spacing: 0.2px; } #pg-rewards-code .pg-rw-up{ color: rgba(34,197,94,0.98); /* green */ text-shadow: 0 0 12px rgba(34,197,94,0.14); } #pg-rewards-code .pg-rw-down{ color: rgba(239,68,68,0.98); /* red */ text-shadow: 0 0 12px rgba(239,68,68,0.18); } #pg-rewards-code .pg-rw-arrow{ font-size: 13px; transform: translateY(-1px); } /* ========================================================= STEP 163C — Token Amount foreground + unclip when nudged upward Fix: .pg-rw-label + #pg-rw-amt were being clipped by .pg-rw-mid overflow ========================================================= */ #pg-rewards-code.is-code-open .pg-rw-mid{ overflow: visible; /* allow upward shift without clipping */ } #pg-rewards-code.is-code-open .pg-rw-block.pg-rw-right{ position: absolute; right: 0; top: -42px; /* move up into the assetmeta row */ z-index: 80; /* above any glass / mid overlay */ pointer-events: none; /* display-only */ } #pg-rewards-code.is-code-open .pg-rw-block.pg-rw-right .pg-rw-label, #pg-rewards-code.is-code-open .pg-rw-block.pg-rw-right #pg-rw-amt{ position: relative; z-index: 81; } /* Ghost-outline fade (left quarter fades away) */ #pg-rewards-code::before{ content:""; position:absolute; inset:0; border-radius: 18px; padding: 1px; /* border thickness */ pointer-events:none; /* Border-only paint (prevents any brand tint in the fill) */ background: linear-gradient(110deg, rgba(var(--accent-rgb),0.) 0%, rgba(var(--accent-rgb),0.92) 40%, rgba(255,255,255,0.22) 62%, rgba(var(--accent-rgb),0.42) 100%) border-box; /* Make it border-only, then fade the left side for the ghost-outline look */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0), linear-gradient(90deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.35) 18%, rgba(0,0,0,1.00) 44%, rgba(0,0,0,1.00) 100%); -webkit-mask-composite: xor, destination-in; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0), linear-gradient(90deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.35) 18%, rgba(0,0,0,1.00) 44%, rgba(0,0,0,1.00) 100%); mask-composite: exclude, intersect; opacity: 1; filter: none; } /* Brand shimmer accents on the stroke (subtle, premium) */ #pg-rewards-code::after{ content:""; position:absolute; inset:0; border-radius: 18px; padding: 1px; pointer-events:none; /* Small white-ish shimmer hits on the outline (premium, not loud) */ background: radial-gradient(18px 18px at 22% 18%, rgba(255,255,255,0.20), rgba(255,255,255,0.00) 70%), radial-gradient(26px 26px at 86% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 72%), linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.10) 24%, rgba(255,255,255,0.00) 52%) border-box; /* Border-only */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.85; filter: blur(0.20px); mix-blend-mode: screen; } /* --- Rewards Code: sexy "tap / swipe" drawer (no clipping) --- */ #pg-rewards-code .pg-rw-codebar{ max-height: 0; opacity: 0; transform: translateY(8px); pointer-events: none; transition: max-height 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease, transform 260ms cubic-bezier(.2,.9,.2,1); } /* Subtle footer fade + micro pill indicator (MOBILE) */ #pg-rewards-code .pg-rw-bottom{ position:absolute; left:0; right:0; bottom:-30px; transform: translateY(var(--pg-rw-indicator-shift)); will-change: transform; height:34px; border-radius: 0 0 18px 18px; pointer-events:auto; z-index: 4; overflow:hidden; background: transparent; } #pg-rewards-code .pg-rw-bottom::before{ content:""; position:absolute; inset:0; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 18%, rgba(0,0,0,0.22) 58%, rgba(0,0,0,0.46) 100%), /* Divider line at top of ribbon (crisp) */ linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.22) 18%, rgba(255,255,255,0.22) 82%, rgba(255,255,255,0.00) 100%) 0 0/100% 1px no-repeat, /* Slight inner lift (announces “drawer”) */ radial-gradient(120px 26px at 50% 10%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 70%); opacity: 0.95; pointer-events:none; } /* Toggle button overlays card (tap anywhere) — CLOSED: entire card is tappable */ #pg-rewards-code .pg-rw-toggle{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background: transparent; pointer-events: auto; cursor:pointer; z-index: 6; /* sit above glass layers */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* faster taps, less “ghost” scroll */ } /* OPEN: disable the overlay so the input + Apply button are fully interactive */ #pg-rewards-code.is-code-open .pg-rw-toggle{ pointer-events:none; } #pg-rewards-code .pg-rw-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } #pg-rewards-code .pg-rw-pill{ position:absolute; left:50%; bottom:-10px; transform: translateX(-50%) translateY(var(--pg-rw-indicator-shift)); width: 32px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.92), rgba(var(--accent-rgb),0.18)); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.32) inset, 0 0 18px rgba(var(--accent-rgb),0.35), 0 12px 24px rgba(0,0,0,0.58); opacity: 0.88; pointer-events:none; animation: pgRwPillPulse 2.8s ease-in-out infinite; } #pg-rewards-code .pg-rw-pill::after{ content:""; position:absolute; inset:-60% -80%; background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.24), rgba(255,255,255,0.00)); transform: translateX(-35%); animation: pgRwPillSheen 3.6s ease-in-out infinite; opacity: 0.9; } @keyframes pgRwPillPulse{ 0%,100%{ transform: translateX(-50%) translateY(var(--pg-rw-indicator-shift)) scaleX(1); opacity:0.68; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 50%{ transform: translateX(-50%) translateY(var(--pg-rw-indicator-shift)) scaleX(1.06); opacity:0.86; filter: drop-shadow(0 0 10px rgba(255,255,255,0.10)); } } @keyframes pgRwPillSheen{ 0%{ transform: translateX(-45%); opacity:0.0; } 18%{ opacity:0.0; } 50%{ opacity:0.9; } 82%{ opacity:0.0; } 100%{ transform: translateX(45%); opacity:0.0; } } /* ========================================================= STEP 1013 — MOBILE ONLY: HIDE CLOSED LEGACY REWARDS WITHOUT COLLAPSING LAYOUT Goal: - Hide the old #pg-rewards-code shell on the main gateway - Preserve its layout height so the rewards entry screen/keypad stays locked - Do NOT affect .is-code-open or .is-ar-open rewards entry states Scope: MOBILE ONLY. No JS/API changes. ========================================================= */ @media (max-width: 640px){ #pg-rewards-code:not(.is-code-open):not(.is-ar-open){ display: block !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ========================================================= OPEN / CLOSE BEHAVIOR (SoT) Closed (default): only title + rewards total + pill. Open (tap): show meta row + price/amount + codebar. ========================================================= */ #pg-rewards-code.is-code-open{ height: 74px; /* keep closed height; open overlays instead of pushing content */ } /* OPEN overlays: show additional content WITHOUT changing layout height (overlays asset carousel) */ #pg-rewards-code.is-code-open{ z-index: 50; overflow: visible; } /* OPEN panel backdrop (SoT: open state has its own glass panel background) */ #pg-rewards-code.is-code-open::before{ /* OPEN BACKDROP (authoritative) — this is the background you adjust */ content:""; position:absolute; left:0; right:0; top:0; height: 172px; /* visual open height (covers meta + codebar) */ border-radius: 18px; pointer-events:none; z-index: 1; /* IMPORTANT: disable any mask stacks while open (prevents "no effect" transparency) */ -webkit-mask: none !important; mask: none !important; -webkit-mask-image: none !important; mask-image: none !important; /* Dark glass backdrop (requested ~82% opacity) */ background: linear-gradient(180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.90) 100%) !important; /* Keep outline crisp (doesn't wash out) */ box-shadow: 0 18px 38px rgba(0,0,0,0.60), 0 0 0 1px rgba(var(--accent-rgb),0.80) inset, inset 0 1px 0 rgba(255,255,255,0.12), inset 0 12px 26px rgba(0,0,0,0.58) !important; opacity: 1 !important; } /* ========================================================= OPEN state: HIDE CLOSED drawer ribbon visuals (pill/sweep/bottom outline) Keep the tap-area so users can still tap the bottom zone to close. (Visuals only — no JS changes) ========================================================= */ #pg-rewards-code.is-code-open{ /* Remove the CLOSED bottom "drawer plate" layer so it doesn't show through the OPEN overlay */ background-image: /* main body glass shading */ linear-gradient(180deg, rgba(255,255,255,0.050) 0%, rgba(255,255,255,0.022) 34%, rgba(0,0,0,0.14) 58%, rgba(0,0,0,0.42) 100%), /* subtle bottom deepen */ linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 62%, rgba(0,0,0,0.24) 100%) !important; } /* Hide the closed-state bottom ribbon visuals while open */ #pg-rewards-code.is-code-open .pg-rw-bottom{ opacity: 0 !important; } #pg-rewards-code.is-code-open .pg-rw-bottom::before, #pg-rewards-code.is-code-open .pg-rw-bottom::after{ opacity: 0 !important; } /* Hide the pill + its sheen while open (tap-zone remains via .pg-rw-toggle) */ #pg-rewards-code.is-code-open .pg-rw-pill, #pg-rewards-code.is-code-open .pg-rw-pill::after{ opacity: 0 !important; box-shadow: none !important; filter: none !important; } /* Ensure overlay content sits above the backdrop */ #pg-rewards-code.is-code-open .pg-rw-top, #pg-rewards-code.is-code-open .pg-rw-assetmeta, #pg-rewards-code.is-code-open .pg-rw-mid, #pg-rewards-code.is-code-open .pg-rw-codebar, #pg-rewards-code.is-code-open .pg-rw-bottom{ z-index: 5; } /* Micro: soften carousel behind the open rewards panel (premium focus shift) */ #pg-asset-row{ position: relative; transition: filter 220ms ease, transform 260ms cubic-bezier(.2,.9,.2,1); will-change: filter, transform; } /* Dim veil + defocus for premium focus shift when Rewards is open */ html.pg-rw-open #pg-asset-row::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.44)); } html.pg-rw-open #pg-asset-row{ filter: blur(1.9px) saturate(0.90) brightness(0.78); transform: translateY(6px) scale(0.992); pointer-events: none; } #pg-rewards-code.is-code-open .pg-rw-assetmeta, #pg-rewards-code.is-code-open .pg-rw-mid, #pg-rewards-code.is-code-open .pg-rw-codebar{ position: absolute; left: 16px; right: 16px; } #pg-rewards-code.is-code-open .pg-rw-assetmeta{ top: 44px; /* sits under the title row */ } #pg-rewards-code.is-code-open .pg-rw-mid{ top: 76px; } #pg-rewards-code.is-code-open .pg-rw-codebar{ top: 140px; bottom: auto; } /* Keep the CLOSED ribbon visuals hidden while OPEN (pill/sweep already finalized) */ #pg-rewards-code.is-code-open .pg-rw-bottom{ opacity: 0 !important; pointer-events: none !important; } /* Reveal meta + mid blocks on open */ #pg-rewards-code.is-code-open .pg-rw-assetmeta{ opacity: 1; max-height: 28px; transform: none; pointer-events: auto; } #pg-rewards-code.is-code-open .pg-rw-mid{ opacity: 1; max-height: 72px; margin-bottom: 12px; transform: none; pointer-events: auto; } /* --- STEP 146A: Safety overrides to ensure OPEN content is actually visible (no washout / no clipping) --- */ #pg-rewards-code .pg-rw-assetmeta, #pg-rewards-code .pg-rw-mid, #pg-rewards-code .pg-rw-codebar{ position: relative; z-index: 7; /* above any glass/bottom fades */ } #pg-rewards-code .pg-rw-top{ position: relative; z-index: 8; } #pg-rewards-code .pg-rw-bottom{ z-index: 9; } #pg-rewards-code .pg-rw-toggle{ z-index: 10; } /* click layer */ /* When OPEN, bring the content stack to the very top */ #pg-rewards-code.is-code-open .pg-rw-assetmeta, #pg-rewards-code.is-code-open .pg-rw-mid, #pg-rewards-code.is-code-open .pg-rw-codebar{ z-index: 60; } #pg-rewards-code .pg-rw-codebar{ position:absolute; left: 16px; right: 16px; margin-top: -18px; bottom: 34px; /* moved up 78px to overlay the hidden data */ height: 41px; /* reduced height */ border-radius: 8px; overflow: hidden; display:flex; align-items:center; padding: 0; box-sizing: border-box; /* OFF state hidden */ max-height: 0; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 220ms ease, transform 300ms cubic-bezier(.2,.9,.2,1), max-height 260ms cubic-bezier(.2,.9,.2,1); /* Smoky glass + inner highlight */ background: radial-gradient(120% 160% at 25% 35%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 34%, rgba(0,0,0,0.00) 70%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.36)), rgba(8,12,14,0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 24px rgba(0,0,0,0.58), inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 10px 22px rgba(0,0,0,0.34), 0 0 18px rgba(255,255,255,0.08); } #pg-rewards-code.is-code-open .pg-rw-codebar{ max-height: 60px; opacity: 1; transform: translateY(0); pointer-events: auto; } /* Input */ #pg-rewards-code .pg-rw-input{ flex: 1 1 auto; border-radius: 8px; height: 100%; border: 0; outline: none; background: transparent; color: rgba(255,255,255,0.86); font-size: 18px; letter-spacing: 0.12px; padding: 0 96px 0 18px; /* space for ghost Apply */ box-sizing: border-box; text-shadow: 0 2px 10px rgba(0,0,0,0.55); } #pg-rewards-code .pg-rw-input::placeholder{ color: rgba(255,255,255,0.55); } /* Ghost Apply button (inside the same container) */ #pg-rewards-code .pg-rw-apply{ position:absolute; top:0; right:0; bottom:0; width: 96px; border-radius: 0 8px 8px 0; border:0; background: radial-gradient(120% 140% at 20% 50%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.00) 62%), linear-gradient(90deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.46) 100%); color: rgba(255,255,255,0.92); font-size: 18px; font-weight: 700; letter-spacing: 0.12px; cursor: pointer; display:flex; align-items:center; justify-content:center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); -webkit-tap-highlight-color: transparent; } #pg-rewards-code .pg-rw-apply::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.24) 38%, rgba(255,255,255,0.08) 70%, rgba(255,255,255,0.00) 100%); box-shadow: 0 0 12px rgba(255,255,255,0.18); } #pg-rewards-code .pg-rw-apply:active{ filter: brightness(1.08); } /* Micro “hero” reveal: a soft light sweep */ #pg-rewards-code.is-code-open .pg-rw-codebar::after{ content:""; position:absolute; inset:-40% -30%; background: linear-gradient(110deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.06) 52%, rgba(255,255,255,0.00) 70%); transform: translateX(-45%) rotate(6deg); animation: pgRwSweep 620ms cubic-bezier(.2,.9,.2,1) 1; pointer-events:none; mix-blend-mode: screen; } @keyframes pgRwSweep{ 0%{ transform: translateX(-55%) rotate(6deg); opacity:0.0; } 18%{ opacity:0.9; } 100%{ transform: translateX(55%) rotate(6deg); opacity:0.0; } } @keyframes pgRwGhostShimmer{ 0%, 100%{ opacity:0.94; filter: drop-shadow(0 0 0 rgba(255,255,255,0.0)); } 50%{ opacity:0.96; filter: drop-shadow(0 0 6px rgba(255,255,255,0.06)); } } /* ========================================================= @media (max-width: 640px){ STEP 45 — MOBILE ONLY: FULL-WIDTH, STICKY HEADER Goal: - Remove side spacing so header touches the phone edges - Pin the header to the top so Total + logos are always visible Scope: MOBILE ONLY (<= 640px). Desktop/Tablet untouched. ========================================================= */ #pg-order-summary{ position: sticky !important; top: 0 !important; z-index: 10050 !important; /* Full-bleed across the device (cancel .pg-card padding) */ margin: -16px -14px 14px -14px !important; width: calc(100% + 28px) !important; /* Match “edge-to-edge” look */ border-radius: 0 !important; } .pg-payment-grid .pg-tile:nth-child(1), .pg-payment-grid .pg-tile:nth-child(2) { grid-column: 1 / -1; } .pg-payment-grid .pg-tile { padding: 11px 11px; } .pg-payment-grid .pg-tile-main { flex-direction: row; align-items: center; gap: 8px; } .pg-payment-grid .pg-tile-main span { font-size: 14px; font-weight: 600; line-height: 1.25; } .pg-payment-grid .pg-tile-sub { margin-top: 2px; font-size: 12px; } .pg-payment-grid .pg-logo-chip, .pg-payment-grid .pg-smile-icon { align-self: flex-start; } } /* === SPLASH OVERLAY FOR SUMMARY CALLOUTS (IN-GATEWAY) === */ .pg-splash-shell { margin-top: 12px; border-radius: 16px; overflow: hidden; position: relative; } .pg-splash-layer { position: relative; width: 100%; height: 670px; overflow: hidden; border-radius: 16px; } .pg-splash-video { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-splash-hero { position: absolute; top: 22%; left: 50%; transform: translateX(-50%) translateY(var(--pg-rw-indicator-shift)); width: 100%; padding: 0 18px; text-align: center; font-size: 28px; font-weight: 700; letter-spacing: 0.5px; color: #ffffff; text-shadow: 0 0 12px rgba(255, 0, 255, 0.58), 0 0 26px rgba(0, 255, 255, 0.35); opacity: 0; animation: pgHeroFadeIn 1.4s ease forwards 0.6s, pgHeroFloat 4s ease-in-out infinite 0.6s; } .pg-splash-hero::after { content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: pgHeroShimmer 4.5s ease-in-out infinite 1s; } .pg-summary-card .pg-callouts { margin-top: 0; opacity: 0; pointer-events: none; } .pg-splash-fade-out { animation: pgSplashFadeOut 1.6s ease forwards; } .pg-callouts-fade-in { animation: pgCalloutsFadeIn 1.2s ease forwards; } @keyframes pgHeroFadeIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes pgHeroFloat { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } } @keyframes pgHeroShimmer { 0% { left: -150%; } 60% { left: 150%; } 100% { left: 150%; } } @keyframes pgSplashFadeOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @keyframes pgCalloutsFadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= STEP 1010 — MOBILE ONLY: NEW GATEWAY REWARDS VIEW Goal: - Add a simple rewards view directly under #pg-crypto-meta - Display live available rewards from #pg-rw-usd - Tap opens the existing footer Rewards section Scope: MOBILE ONLY. Desktop/tablet untouched. No API changes. ========================================================= */ #pg-rewards-gateway{ display:none; } @media (max-width: 520px){ #pg-rewards-gateway.pg-rewards-gateway{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:7px 0 18px 0 !important; min-height:74px; padding:13px 14px; border-radius:9px; border:1px solid rgba(255,255,255,0.58); background:linear-gradient(180deg, rgba(10,13,16,0.96), rgba(6,8,10,0.98)); box-shadow:0 12px 24px rgba(0,0,0,0.44),0 0 0 1px rgba(var(--accent-rgb,0,255,213),0.18),inset 0 1px 0 rgba(255,255,255,0.08); color:rgba(255,255,255,0.94); display:flex; align-items:center; justify-content:space-between; gap:10px; box-sizing:border-box; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } #pg-rewards-gateway .pg-rg-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto;} #pg-rewards-gateway .pg-rg-icon{width:24px;height:24px;flex:0 0 24px;display:block;color:rgb(var(--accent-rgb,0,255,213));background:currentColor;-webkit-mask:url("https://irp.cdn-website.com/630a36f4/dms3rep/multi/rewards-return.svg") center/contain no-repeat;mask:url("https://irp.cdn-website.com/630a36f4/dms3rep/multi/rewards-return.svg") center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(var(--accent-rgb,0,255,213),0.34));} #pg-rewards-gateway .pg-rg-copy{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1 1 auto;} #pg-rewards-gateway .pg-rg-title{font-size:13px;line-height:1.05;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.94);white-space:nowrap;} #pg-rewards-gateway .pg-rg-sub{font-size:12px;line-height:1.15;font-weight:500;letter-spacing:0.02em;color:rgba(255,255,255,0.76);white-space:nowrap;overflow:visible;text-overflow:clip;} #pg-rewards-gateway .pg-rg-amount{flex:0 0 auto;font-size:15px;line-height:1;font-weight:800;letter-spacing:0.02em;color:rgba(var(--accent-rgb,0,255,213),1);text-shadow:0 0 14px rgba(var(--accent-rgb,0,255,213),0.22);white-space:nowrap;} #pg-rewards-gateway:active{transform:scale(0.992);} } /* STEP 1012 — MOBILE ONLY: rewards return icon for gateway view + footer rewards tab */ @media (max-width: 520px){ .pg-dock-btn .pg-dock-ico.pg-dock-rewards-mask{ width:24px;height:24px;display:block;background:currentColor;opacity:0.72; -webkit-mask:url("https://irp.cdn-website.com/630a36f4/dms3rep/multi/rewards-return.svg") center/contain no-repeat; mask:url("https://irp.cdn-website.com/630a36f4/dms3rep/multi/rewards-return.svg") center/contain no-repeat; filter:drop-shadow(0 0 0 rgba(0,0,0,0)); transition:transform 120ms ease, opacity 120ms ease, filter 140ms ease; } } /* ============================ ORDER SUMMARY + DETAILS DRAWER (PayPal-style, gateway-matched) ============================= */ .pg-order-summary{ margin: 0 0 18px 0; padding: 18px 18px 14px 18px; border: 1px solid var(--z-border-2); border-radius: var(--radius-card); /* Neutral “black glass” header (no brandColor tint) */ position: relative; z-index: 10002; /* keep above backdrop */ overflow: hidden; background: radial-gradient(1200px 420px at 12% 0%, rgba(255,255,255,0.08), transparent 56%), radial-gradient(900px 360px at 88% 18%, rgba(255,255,255,0.04), transparent 60%), linear-gradient(180deg, rgba(16,18,20,0.78), rgba(10,11,12,0.78)); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); box-shadow: var(--shadow-card), var(--shadow-inner); } .pg-os-row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 18px; } .pg-os-left{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; } .pg-os-title{ font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #101018; margin: 0 0 6px 0; } .pg-os-merchant{ font-size: 16px; font-weight: 600; color: rgba(16,16,24,0.85); margin: 0 0 8px 0; line-height: 1.25; } .pg-os-dot{opacity:0.6; margin: 0 6px;} .pg-os-details-btn{ display:inline-flex; align-items:center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.10); background: rgba(255,255,255,0.7); color: rgba(16,16,24,0.85); font-size: 14px; font-weight: 700; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .pg-os-details-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(20,20,40,0.10); } .pg-os-caret{ display:inline-block; transition: transform .18s ease; } .pg-os-right{ text-align:right; min-width: 210px; } .pg-os-meta{ font-size: 14px; font-weight: 700; color: rgba(16,16,24,0.65); margin: 2px 0 6px 0; } .pg-os-total{ font-size: 26px; font-weight: 900; color: #101018; line-height: 1.05; margin: 0 0 6px 0; } .pg-os-demo{ font-size: 16px; font-weight: 800; color: rgba(16,16,24,0.72); margin: 0; } /* Drawer (slide-down) */ .pg-os-drawer{ margin-top: 12px; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); transition: max-height .28s ease, opacity .22s ease, transform .22s ease; border-radius: 14px; } .pg-order-summary.pg-os-open .pg-os-drawer{ max-height: 520px; opacity: 1; transform: translateY(0); } .pg-order-summary.pg-os-open .pg-os-caret{ transform: rotate(180deg); } .pg-os-drawer-inner{ padding: 16px 16px 14px 16px; background: rgba(255,255,255,0.72); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; } .pg-os-drawer-title{ font-size: 16px; font-weight: 900; color: #101018; margin: 0 0 4px 0; } .pg-os-drawer-merchant{ font-size: 14px; font-weight: 800; color: rgba(16,16,24,0.85); } .pg-os-drawer-license{ font-size: 13px; font-weight: 700; color: rgba(16,16,24,0.65); margin-top: 2px; } .pg-os-license-note{opacity:0.7; font-weight:700;} .pg-os-lines{ margin-top: 12px; border-radius: 12px; background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.06); padding: 10px 12px; } .pg-os-line{ display:flex; align-items:center; justify-content:space-between; gap: 12px; font-size: 14px; font-weight: 800; color: rgba(16,16,24,0.85); padding: 7px 2px; } .pg-os-muted{ font-weight: 750; color: rgba(16,16,24,0.68); } .pg-os-grand{ font-size: 15px; font-weight: 900; color: #101018; } .pg-os-sep{ height: 1px; background: rgba(0,0,0,0.10); margin: 6px 0; } /* Responsive */ @media (max-width: 820px){ .pg-order-summary{padding: 16px 14px 12px 14px;} .pg-os-title{font-size: 24px;} .pg-os-total{font-size: 24px;} .pg-os-right{min-width: 0;} } @media (max-width: 520px){ /* Step 14 (MOBILE ONLY): Move pricing block beside the View details button */ .pg-os-row{flex-direction: column; align-items: flex-start;} /* Pull the pricing block up and to the right so it sits on the same row as the button */ .pg-os-right{ text-align: left; margin-top: -44px; /* aligns with 38px button height + spacing */ margin-left: 140px; /* button width (~125px) + gap */ width: calc(100% - 140px); max-width: 260px; } .pg-os-total{margin-top: 2px;} /* Slightly tighten type so it fits cleanly beside the button */ .pg-os-right .pg-os-muted{font-size: 12px;} .pg-os-right .pg-os-total{font-size: 19px; line-height: 1.05;} .pg-os-right .pg-os-demo{font-size: 13px;} } @media (max-width: 520px) { .pg-os-brand, #pg-os-merchant-logo { margin-top: 20px; /* adjust if needed */ } } /* Order Summary typography (dark theme) */ .pg-os-title{ color: var(--z-text) !important; } .pg-os-merchant{ color: var(--z-text) !important; opacity: 0.92; } .pg-os-merchant .pg-os-dot{ opacity: 0.55; } .pg-os-right .pg-os-muted{ color: var(--z-text-muted) !important; } .pg-os-right .pg-os-total{ color: var(--z-text) !important; } .pg-os-right .pg-os-demo{ color: var(--z-text-muted) !important; } /* Desktop/Tablet split: payment types left (stacked), asset selection right */ /* Width authority: payment column + rewards field must match */ :root{ --pg-paycol-width: 353px; /* single source of truth (matches rewards field) */ } /* Rewards PANEL (mobile-only; hidden on desktop/tablet) */ #pg-rewards-code{ display:none; } /* Rewards code field (left column) */ .pg-rewards-field{ width: var(--pg-paycol-width); max-width: var(--pg-paycol-width); height: 46px !important; margin-top: 0px; margin-bottom: 20px; border-radius: 8px !important; transform: translateY(-7px); overflow: visible; } .pg-rewards-input{ width: 100%; height: 100%; min-height: 44px; background: var(--z-surface-2); border: 1px solid var(--z-border); border-radius: 8px !important; padding: 0 18px; color: var(--z-text); font-size: 16px; font-weight: 600; text-align: center; outline: none; transition: box-shadow .18s ease, border-color .18s ease, background .18s ease; } .pg-rewards-input::placeholder{ color: var(--z-accent); opacity: .95; } .pg-rewards-input:focus{ border-color: color-mix(in srgb, var(--z-accent) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--z-accent) 45%, transparent), 0 0 18px color-mix(in srgb, var(--z-accent) 35%, transparent); background: color-mix(in srgb, var(--z-surface-2) 86%, var(--z-accent) 14%); } .pg-pay-asset-split{ display: grid; grid-template-columns: var(--pg-paycol-width) 1fr; gap: 18px; align-items: start; margin-top: 6px; } .pg-pay-col{ width: var(--pg-paycol-width); max-width: var(--pg-paycol-width); } .pg-pay-col .pg-payment-grid{ grid-template-columns: 1fr !important; /* stack crypto + card */ gap: 6px !important; /* tighter spacing to match SoT */ } /* Asset column disabled until crypto selected */ .pg-asset-col.pg-disabled{ opacity: 0.38; filter: grayscale(0.25); pointer-events: none; } .pg-asset-col .pg-section-label{ margin-top: 0 !important; } /* Responsive: collapse to single column on mobile */ @media (max-width: 860px){ .pg-pay-asset-split{ grid-template-columns: 1fr; } .pg-pay-col{ width: 100%; max-width: 100%; } .pg-asset-col.pg-disabled{ opacity: 1; filter: none; pointer-events: auto; } } /* Customer collapsible */ .pg-customer{ margin-top: 16px; padding: 14px 16px; border: 1px solid var(--z-border-2); border-radius: var(--radius-card); background: radial-gradient(900px 260px at 12% 0%, rgba(var(--accent-rgb),0.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); box-shadow: var(--shadow-inner); } .pg-customer-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; } .pg-customer-title{ font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--z-text-muted); font-weight: 700; } .pg-customer-meta{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; justify-content:flex-end; } .pg-customer-welcome{ color: var(--z-text); opacity: 0.92; font-weight: 650; } .pg-customer-btn{ padding: 8px 12px !important; font-size: 13px !important; } .pg-customer-drawer-inner{ padding-top: 12px; } /* === ZELEN PRODUCTION TIGHTEN: Larger payment options, tighter assets/meta (layout only) === */ :root{ --payopt-pad-y: 20px; --payopt-pad-x: 22px; --payopt-title: 19px; --payopt-sub: 13px; --asset-pad-y: 10px; --asset-pad-x: 12px; --asset-title: 14px; --asset-sub: 11px; --asset-minh: 58px; --meta-pad-y: 10px; --meta-pad-x: 12px; --meta-minh: 72px; --meta-title: 11px; --meta-value: 15px; --meta-note: 11px; } /* Payment option cards (left) */ .pg-paytype-card{ padding: var(--payopt-pad-y) var(--payopt-pad-x) !important; min-height: 104px !important; } .pg-paytype-title{ font-size: var(--payopt-title) !important; line-height: 1.15 !important; } .pg-paytype-sub{ font-size: var(--payopt-sub) !important; line-height: 1.25 !important; opacity: .78 !important; } /* Asset tiles (right) */ .pg-asset-btn{ padding: var(--asset-pad-y) var(--asset-pad-x) !important; min-height: var(--asset-minh) !important; } .pg-asset-symbol{ font-size: var(--asset-title) !important; line-height: 1.1 !important; } .pg-asset-name{ font-size: var(--asset-sub) !important; line-height: 1.15 !important; opacity: .76 !important; } /* Real-time pricing meta boxes */ .pg-crypto-meta-item{ padding: var(--meta-pad-y) var(--meta-pad-x) !important; min-height: var(--meta-minh) !important; } .pg-crypto-meta-label{ font-size: 11px !important; letter-spacing: .14em !important; } .pg-crypto-meta-value{ font-size: var(--meta-value) !important; } .pg-crypto-meta-note{ font-size: var(--meta-note) !important; } /* Keep everything visually aligned */ .pg-payasset-grid{ align-items: start !important; } /* ========================================================= MOBILE LAYOUT PATCH (Payment types + Crypto tiles + Live pricing) Scope: mobile only (<= 640px). Desktop/Tablet remain unchanged. ========================================================= */ @media (max-width: 640px) { /* Keep everything within viewport (no horizontal clipping) */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; } #crypto-gateway-demo-root { width: 100%; max-width: 100%; overflow-x: hidden; padding-left: 12px; padding-right: 12px; padding-top: 0; padding-bottom: 0; background: transparent; } .pg-layout { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } /* Remove any outer "frame" on mobile and maximize phone viewport */ .pg-card.pg-main-card{ width: 100%; max-width: 100%; margin: 0; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; } /* Payment buttons: stacked full-width (matches reference) */ .pg-payment-grid { grid-template-columns: 1fr !important; gap: 6px !important; /* tighter spacing to match SoT */ } .pg-payment-grid .pg-tile { width: 100%; min-width: 0; } /* Crypto buttons: 2-column grid */ .pg-crypto-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .pg-asset-pill { min-width: 0; } /* Live pricing preview: 3-column grid (compact, no overflow) */ .pg-crypto-meta { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } .pg-crypto-meta-item { min-width: 0 !important; padding: 10px 8px !important; overflow: hidden; } .pg-crypto-meta-label { font-size: 11px !important; letter-spacing: 0.14em !important; } .pg-crypto-meta-value { font-size: 14px !important; } .pg-crypto-meta-note { font-size: 11px !important; } /* ============================ MOBILE FIT + NO RIGHT CLIP Scope: MOBILE ONLY (<=520px) - removes outside frame/border look - guarantees no horizontal overflow - scales down payment + asset + meta blocks proportionally ============================ */ @media (max-width: 520px){ /* 1) HARD STOP horizontal clipping */ html, body{ margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* Root wrapper (no “outside border/frame”) */ #crypto-gateway-demo-root{ padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; background: transparent !important; } /* Layout must be full width */ .pg-layout{ width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Main card should go edge-to-edge on phone */ .pg-card{ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; /* keep safe tap padding but not huge */ padding: 16px 12px 18px !important; /* remove the “outside container/border” look */ border-radius: 0 !important; } /* 2) This is the big one: allow grid/flex children to shrink */ .pg-card *, .pg-layout *{ box-sizing: border-box !important; min-width: 0 !important; } /* 3) Proportional tightening (payment tiles / asset tiles / meta boxes) */ :root{ --payopt-pad-y: 18px; --payopt-pad-x: 16px; --payopt-title: 18px; --payopt-sub: 12px; --asset-pad-y: 10px; --asset-pad-x: 10px; --asset-title: 13px; --asset-sub: 11px; --asset-minh: 56px; --meta-pad-y: 10px; --meta-pad-x: 8px; --meta-minh: 70px; --meta-value: 14px; --meta-note: 11px; } /* 4) Tighten grids so nothing spills */ .pg-payasset-grid{ gap: 10px !important; } .pg-crypto-meta{ gap: 10px !important; } } /* ========================================================= MOBILE ONLY — Header / Customer / Stepper spacing refinements (Desktop + Tablet locked) ========================================================= */ @media (max-width: 520px){ /* --- Order Summary layout --- */ /* (Mobile header layout handled below in MOBILE HEADER FINAL OVERRIDES) */ /* --- Customer bar --- */ .pg-customer{ height: 63px !important; padding: 0 14px !important; display: flex !important; align-items: center !important; } .pg-customer-title{ display: none !important; /* removes broken CUSTOMER label on 2 lines */ } .pg-customer-head{ align-items: center !important; } .pg-customer-meta{ display: flex !important; align-items: center !important; width: 100% !important; gap: 10px !important; min-width: 0 !important; } /* Match View details button sizing/alignment */ .pg-customer-btn{ width: 135px !important; height: 42px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; line-height: 1 !important; margin: 0 !important; flex: 0 0 auto !important; } /* Customer name: same vibe as merchant line, align to right edge */ .pg-customer-welcome{ flex: 1 1 auto !important; min-width: 0 !important; margin-left: auto !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.25 !important; text-align: right !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; opacity: 0.92 !important; } /* --- Payment Type & Billing header + stepper --- */ .pg-card-header{ flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .pg-title{ font-size: 22px !important; line-height: 1.12 !important; white-space: nowrap; /* keep title on one line */ } .pg-stepper{ width: 100% !important; justify-content: center !important; gap: 6px !important; /* tighter spacing to match SoT */ transform: scale(0.9); transform-origin: center top; } .pg-step{ gap: 8px !important; } .pg-step-circle{ width: 32px !important; height: 32px !important; font-size: 14px !important; } .pg-step span{ font-size: 13px !important; } .pg-os-meta, .pg-os-total, .pg-os-demo{ text-align: left !important; width: 100% !important; } /* Buttons: View details + Edit details */ .pg-os-details-btn{ width: 135px !important; height: 42px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; line-height: 1 !important; } #pg-os-toggle.pg-os-details-btn{ top: 0px !important; right: 0px !important; } /* Customer bar height + welcome text */ .pg-customer{ height: 63px !important; padding: 0 14px !important; display: flex !important; align-items: center !important; } /* Payment Type & Billing title + centered stepper scaled down 10% */ .pg-title{ font-size: 22px !important; line-height: 1.12 !important; white-space: nowrap; } .pg-stepper{ justify-content: center !important; transform: scale(0.9); transform-origin: center top; } } /* ========================================================= MOBILE HEADER FINAL OVERRIDES (scope: mobile only) Adjusts ONLY: - Order Summary header layout - Customer bar (Welcome / Edit details) - Payment Type & Billing title + stepper sizing ========================================================= */ @media (max-width: 520px){ /* ---------- Order Summary header ---------- */ /* Goal: - Row 1: logos - Row 2: merchant line - Row 3: View details (left) + totals (right) on SAME ROW - No absolute positioning (prevents totals dropping below) */ .pg-order-summary{ padding: 16px 12px 16px !important; } .pg-os-row{ display: grid !important; grid-template-columns: 150px 1fr !important; /* button col + totals col */ grid-template-rows: auto auto auto !important; column-gap: 6px !important; /* tighter spacing to match SoT */ row-gap: 10px !important; align-items: start !important; align-content: start !important; /* keep grid pinned to top (no stretch) */ } /* Let inner children participate in the grid */ .pg-os-left{ display: contents !important; padding-right: 0 !important; } .pg-os-title{ grid-column: 1 / -1 !important; grid-row: 1 !important; } .pg-os-merchant{ grid-column: 1 / -1 !important; grid-row: 2 !important; margin-top: 0 !important; } /* View details button (Row 3, Col 1) */ #pg-os-toggle.pg-os-details-btn{ grid-column: 1 !important; grid-row: 3 !important; position: static !important; margin: 0 !important; width: 135px !important; height: 42px !important; padding: 0 14px !important; justify-self: start !important; align-self: start !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 999px !important; font-size: 14px !important; line-height: 1 !important; } /* Totals block (Row 3, Col 2) */ .pg-os-right{ grid-column: 2 !important; grid-row: 3 !important; position: static !important; width: auto !important; justify-self: end !important; align-self: start !important; text-align: left !important; margin: 0 !important; } .pg-os-right .pg-os-meta{ margin: 0 0 6px 0 !important; /* align top with button */ line-height: 1.05 !important; text-align: left !important; } .pg-os-right .pg-os-total{ margin: 0 0 4px 0 !important; line-height: 1.05 !important; text-align: left !important; } .pg-os-right .pg-os-demo{ margin: 0 !important; line-height: 1.05 !important; text-align: left !important; } /* ---------- Customer bar (Welcome + Edit details) ---------- */ /* Mobile customer row must be a strict 2-column layout: [ Edit details button ] [ Customer name ] No wrapping, no clipping, no off-screen shifts. */ .pg-customer-title{ display: none !important; } /* remove broken CUSTOMER label */ .pg-customer{ overflow: visible !important; } .pg-customer-head{ height: 63px !important; padding: 0 12px !important; display: flex !important; align-items: center !important; width: 100% !important; overflow: visible !important; } .pg-customer-meta{ width: 100% !important; display: grid !important; grid-template-columns: 135px 1fr !important; align-items: center !important; column-gap: 6px !important; /* tighter spacing to match SoT */ min-width: 0 !important; overflow: visible !important; } /* Button (LEFT) — match View details exactly */ #pg-customer-toggle.pg-customer-btn{ grid-column: 1 !important; justify-self: start !important; width: 135px !important; height: 42px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 13px !important; line-height: 1 !important; margin: 14px !important; flex: 0 0 auto !important; } /* Customer name (RIGHT) — visible, right-aligned, same style as merchant line */ #pg-customer-welcome{ grid-column: 2 !important; justify-self: end !important; align-self: center !important; font-size: 16px !important; font-weight: 600 !important; color: rgba(255,255,255,0.92) !important; line-height: 1.2 !important; text-align: right !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: -110px !important; transform: none !important; } /* ---------- Payment Type & Billing title + stepper ---------- */ .pg-card-header{ gap: 10px !important; } .pg-title{ font-size: 18px !important; line-height: 1.1 !important; white-space: nowrap !important; } .pg-stepper{ margin-left: auto !important; margin-right: auto !important; transform: scale(0.9) !important; /* reduce by 10% */ transform-origin: center top !important; } .pg-step span{ white-space: nowrap !important; font-size: 12px !important; } /* Step20: keep Order Summary title on one line (logo + text) */ .pg-os-title{ flex-wrap: nowrap !important; white-space: nowrap !important; min-width: 0 !important; } .pg-os-title span{ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ===================================================================== POPUP/EMBED FRAME NORMALIZATION (Desktop only) - Keep 20px breathing room around the gateway - Remove any Duda header/footer + reserved space - Do NOT touch core gateway logic ===================================================================== */ html.zelen-gateway-embed #hamburger-header, html.zelen-gateway-embed #hamburger-header-container, html.zelen-gateway-embed .hamburger-header, html.zelen-gateway-embed .p_hfcontainer, html.zelen-gateway-embed header, html.zelen-gateway-embed #header, html.zelen-gateway-embed #headerWrapper, html.zelen-gateway-embed .dmHeader, html.zelen-gateway-embed .dmHeaderContainer, html.zelen-gateway-embed .dmHeaderContainerWrapper, html.zelen-gateway-embed #dm-outer-wrapper header, html.zelen-gateway-embed #dm-outer-wrapper #hamburger-header { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } html.zelen-gateway-embed #dmFooter, html.zelen-gateway-embed footer, html.zelen-gateway-embed .dmFooter, html.zelen-gateway-embed .dmFooterContainer, html.zelen-gateway-embed .dmFooterContainerWrapper { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* The ONLY outside spacing we want is a 20px frame around the gateway */ @media (min-width: 521px) { html.zelen-gateway-embed #crypto-gateway-demo-root{ width: 100% !important; max-width: 980px !important; margin: 0 auto !important; padding: 5px !important; /* 5px symmetrical frame around gateway */ box-sizing: border-box !important; background: #0b0f12 !important; } html.zelen-gateway-embed .pg-layout, html.zelen-gateway-embed .pg-main-card, html.zelen-gateway-embed .pg-card { margin: 0 !important; } } /* Allow scrolling in editor/mobile previews (do NOT lock the page) */ html.zelen-gateway-embed body { position: relative !important; } /* If any global rules try to kill scrolling, override them in embed mode */ html.zelen-gateway-embed body, html.zelen-gateway-embed #dm-outer-wrapper, html.zelen-gateway-embed #dm-root, html.zelen-gateway-embed #dm-outer-wrapper * { overscroll-behavior: auto; } /* Merchant logo (replaces "Order Summary" text) */ .pg-os-merchant-logo{ height: 28px; max-width: 240px; width: auto; object-fit: contain; display: none; } /* ========================================================= STEP 6 — MOBILE ONLY: REMOVE DUDA HAMBURGER NAV BUTTON - Spacing handled in editor; we only hide the hamburger trigger. - Scope: MOBILE ONLY (<=520px). Desktop/Tablet remain unchanged. ========================================================= */ @media (max-width: 520px){ button#layout-drawer-hamburger, #layout-drawer-hamburger, .layout-drawer-hamburger, .hamburger-on-header{ display: none !important; } } /* ========================================================= STEP 8 — HARD REMOVE DUDA HAMBURGER / NAV (ALL SCREENS) Scope: This unique gateway page should show NO navigation. NOTE: Targets ONLY the known Duda hamburger elements. ========================================================= */ html.zelen-gateway-embed #hamburger-header-container, html.zelen-gateway-embed #hamburger-header, html.zelen-gateway-embed #layout-drawer-hamburger, html.zelen-gateway-embed button#layout-drawer-hamburger, html.zelen-gateway-embed .layout-drawer-hamburger, html.zelen-gateway-embed .hamburger-header-container, html.zelen-gateway-embed .hamburger-header, html.zelen-gateway-embed .hamburger-on-header, html.zelen-gateway-embed .dmHamburger, html.zelen-gateway-embed #dmHamburger { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Remove any reserved spacing that some templates keep for the header/nav */ html.zelen-gateway-embed .stickyHeaderSpacer, html.zelen-gateway-embed #stickyHeaderSpacer, html.zelen-gateway-embed #dmFirstContainer, html.zelen-gateway-embed .dmFirstContainer { margin-top: 0 !important; } /* ========================================================= STEP 10 — MOBILE ONLY: View details button placement + size GOAL (match "Correct Design" 1:1): - Move "View details" BELOW merchant line (not top-right) - Size: 114px x 36px Scope: MOBILE ONLY (<=520px). Desktop/Tablet untouched. ========================================================= */ @media (max-width: 520px){ /* Undo prior mobile rules that pinned the button top-right */ .pg-os-left{ padding-right: 0 !important; /* no reserved space for button */ } #pg-os-toggle.pg-os-details-btn{ position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; margin-top: 10px !important; /* sits directly under merchant line */ width: 114px !important; height: 36px !important; padding: 0 12px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 13px !important; line-height: 1 !important; } /* Keep totals block in normal flow (no absolute pin) */ .pg-os-right{ position: static !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; text-align: left !important; margin-top: 6px !important; } .pg-order-summary{ padding: 16px 12px 14px !important; /* remove extra bottom padding reserved for pinned totals */ } } /* ===================================================================== STEP 18 (TACTICAL) — MOBILE ONLY Move customer name + Edit details 80px to the right. Scope: mobile (<= 520px) ONLY. No other changes. ===================================================================== */ @media (max-width: 520px) { /* Shift the entire customer row (button + name) right by 80px */ .pg-customer-head { padding-left: calc(12px + 80px) !important; padding-right: 12px !important; } } /* ===================================================================== STEP 19 — MOBILE ONLY (TACTICAL) - Move ONLY the customer name onto the same row as the Edit details button - Shift ONLY the customer name 80px to the right Scope: mobile (<= 520px) ONLY. No other changes. ===================================================================== */ @media (max-width: 520px) { /* Force button + name into the same row */ .pg-customer-meta{ display: grid !important; grid-template-columns: 135px 1fr !important; grid-template-rows: 42px !important; align-items: center !important; column-gap: 6px !important; /* tighter spacing to match SoT */ min-width: 0 !important; overflow: visible !important; } #pg-customer-toggle.pg-customer-btn{ grid-column: 1 !important; grid-row: 1 !important; } #pg-customer-welcome{ grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; /* Move ONLY the name 80px to the right */ transform: translateX(30px) !important; will-change: transform; } } /* ============================= MOBILE CUSTOMER FULLSCREEN OVERLAY (mobile-only, triggered by Edit details) ============================= */ @media (max-width: 520px){ .pg-mobile-customer-overlay{ display:none; } .pg-mobile-customer-overlay.is-open{ display:block; } .pg-mobile-customer-overlay{ position: fixed; inset: 0; z-index: 99990; background: radial-gradient(1200px 900px at 35% -10%, rgba(var(--accent-rgb, 0,255,213), 0.24), rgba(0,0,0,0) 55%), radial-gradient(900px 700px at 90% 15%, rgba(255,255,255,0.06), rgba(0,0,0,0) 55%), rgba(6,10,12,0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } html.pg-mco-lock, body.pg-mco-lock{ overflow: hidden !important; } .pg-mco-shell{ height: 100vh; height: 100dvh; display: grid; grid-template-rows: 58px 1fr; /* keep original visual position (slightly more inset than last update) */ padding: 16px 18px 18px; box-sizing: border-box; animation: pgMcoFade 180ms ease-out; } @keyframes pgMcoFade{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } } .pg-mco-header{ display:grid; grid-template-columns: 44px 1fr auto; align-items:center; gap: 10px; color: rgba(255,255,255,0.92); } .pg-mco-back{ width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; } .pg-mco-title{ font-size: 20px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-mco-name{ font-size: 14px; font-weight: 600; opacity: 0.9; text-align:right; } .pg-mco-card{ border-radius: 22px; border: 1px solid rgba(var(--accent-rgb, 0,255,213), 0.35); box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 0,255,213), 0.10) inset, 0 12px 44px rgba(0,0,0,0.55); background: rgba(10,14,16,0.55); overflow: visible; padding: 12px; padding-bottom: 18px; display:flex; flex-direction:column; gap: 12px; } .pg-mco-actions{ padding: 6px 0 2px; display:flex; flex-direction:column; gap: 12px; } .pg-mco-error{ display:none; margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 80, 80, 0.35); background: rgba(255, 60, 60, 0.10); color: rgba(255,255,255,0.92); font-size: 13px; font-weight: 600; letter-spacing: 0.15px; } .pg-mco-invalid{ border-color: rgba(255, 80, 80, 0.55) !important; box-shadow: 0 0 0 1px rgba(255, 80, 80, 0.24) inset, 0 0 18px rgba(255, 80, 80, 0.15); } .pg-mco-fields{ display:flex; flex-direction:column; gap: 10px; } .pg-mco-fields label{ display:none !important; } .pg-mco-fields input, .pg-mco-fields select{ width:100%; height: 44px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22); color: rgba(255,255,255,0.85); padding: 0 14px; outline: none; box-sizing: border-box; } .pg-mco-fields input:focus, .pg-mco-fields select:focus{ border-color: rgba(var(--accent-rgb, 0,255,213), 0.75); box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 0,255,213), 0.24); } .pg-mco-row2{ display:grid; grid-template-columns: 1fr; gap: 10px; } .pg-mco-phone{ display:grid; grid-template-columns: 70px 1fr; gap: 10px; } #pg-mco-phone-country{ text-align:center; padding:0; } .pg-mco-select{ position: relative; } .pg-mco-select select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 46px; } .pg-mco-select:after{ content: ""; position:absolute; right: 16px; top: 50%; width: 10px; height: 10px; border-right: 2px solid rgba(255,255,255,0.85); border-bottom: 2px solid rgba(255,255,255,0.85); transform: translateY(-65%) rotate(45deg); pointer-events:none; opacity: 0.9; } .pg-mco-save{ width: 100%; height: 60px; border-radius: 22px; border: 1px solid rgba(var(--accent-rgb, 0,255,213), 0.55); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.24)); color: rgba(255,255,255,0.92); font-size: 18px; font-weight: 700; letter-spacing: 0.2px; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 0,255,213), 0.14) inset, 0 0 22px rgba(var(--accent-rgb, 0,255,213), 0.34), 0 14px 30px rgba(0,0,0,0.60); transition: opacity 140ms ease, filter 140ms ease, box-shadow 140ms ease; } .pg-mco-save:before{ content:""; position:absolute; inset: 0; background: radial-gradient(900px 120px at 50% -20%, rgba(255,255,255,0.26), rgba(255,255,255,0) 55%); opacity: 0.9; pointer-events:none; } .pg-mco-save:after{ content:""; position:absolute; inset: -40px; background: radial-gradient(260px 90px at 50% 120%, rgba(var(--accent-rgb, 0,255,213), 0.52), rgba(0,0,0,0) 65%); filter: blur(16px); opacity: 0.47; pointer-events:none; } .pg-mco-save[disabled]{ opacity: 0.38; filter: saturate(0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.07) inset, 0 0 10px rgba(var(--accent-rgb, 0,255,213), 0.18), 0 10px 24px rgba(0,0,0,0.55); } /* Mobile billing/payment swap controls */ #pg-mco-to-payment{ display:block; } .pg-mco-pay-actions{ display:none; gap:10px; align-items:center; grid-template-columns: 1fr 0.6fr 0.6fr; } .pg-mco-pay-btn{ height: 54px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.24); color: rgba(255,255,255,0.92); font-weight: 700; font-size: 16px; } .pg-mco-pay-primary{ border-color: rgba(var(--accent-rgb, 0,255,213), 0.70); background: radial-gradient(900px 120px at 50% -20%, rgba(255,255,255,0.24), rgba(0,0,0,0.10) 55%), linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.24)); box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 0,255,213), 0.14) inset, 0 0 26px rgba(var(--accent-rgb, 0,255,213), 0.40), 0 14px 30px rgba(0,0,0,0.60); } .pg-mco-pay-btn[disabled]{ opacity: 0.38; filter: saturate(0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 10px rgba(var(--accent-rgb, 0,255,213), 0.10), 0 10px 24px rgba(0,0,0,0.55); } .pg-mco-pay-primary[disabled]{ border-color: rgba(var(--accent-rgb, 0,255,213), 0.36); box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 0,255,213), 0.10) inset, 0 0 12px rgba(var(--accent-rgb, 0,255,213), 0.24), 0 10px 24px rgba(0,0,0,0.55); } .pg-mco-pay-ghost{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); font-weight: 600; } .pg-mco-pay-row{ grid-template-columns: 1fr 1fr; } .pg-mco-save.is-active{ opacity: 1; filter: saturate(1); box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 0,255,213), 0.16) inset, 0 0 26px rgba(var(--accent-rgb, 0,255,213), 0.42), 0 14px 30px rgba(0,0,0,0.60); } .pg-mco-pay-primary.is-active{ border-color: rgba(var(--accent-rgb, 0,255,213), 0.78); box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 0,255,213), 0.24) inset, 0 0 30px rgba(var(--accent-rgb, 0,255,213), 0.48), 0 14px 30px rgba(0,0,0,0.60); } } /* STEP 28: Desktop/Tablet - show Billing Info inside Customer container */ (min-width: 521px){ #pg-card-billing{ display:none !important; } #pg-card-billing-proxy{ margin-top: 14px; } #pg-card-payment-proxy{ margin-top: 14px; } } /* === CONNECT WALLET MODAL FINALIZE OVERRIDES (SoT Step-1) === */ @media (min-width: 521px){ /* Step-34 Wallet Search: tighten modal outline to match gateway card */ .pg-modal{ height:503px !important; min-height:503px !important; max-height:503px !important; } } .pg-modal-header{ height: 77px !important; min-height: 77px !important; } .pg-modal-col-qr{ padding-right: 30px !important; } /* QR image (generated) */ #pg-modal-qr{ width: var(--pg-qr-size) !important; height: var(--pg-qr-size) !important; max-width: var(--pg-qr-size) !important; max-height: var(--pg-qr-size) !important; aspect-ratio: 1 / 1; display:block; object-fit: contain; } .pg-qr-img{ width: var(--pg-qr-size) !important; height: var(--pg-qr-size) !important; max-width: var(--pg-qr-size) !important; max-height: var(--pg-qr-size) !important; aspect-ratio: 1 / 1; display:block; object-fit: contain; image-rendering: pixelated; border-radius:6px; } /* ========================================================== Wallet Drag & Drop (Search <-> Featured) - Desktop/Tablet ========================================================== */ .pg-featured-tile[draggable="true"], .pg-search-tile[draggable="true"]{ cursor: grab; } .pg-featured-tile.pg-dragging, .pg-search-tile.pg-dragging{ cursor: grabbing; opacity: 0.85; transform: translateZ(0) scale(0.99); } .pg-featured-tile.pg-drop-target, .pg-search-tile.pg-drop-target{ outline: 2px solid rgba(var(--accent-rgb),0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 0 14px rgba(var(--accent-rgb),0.32), 0 12px 22px rgba(0,0,0,0.35); } @keyframes pgDropBurst { 0% { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); transform: scale(1); } 35% { box-shadow: 0 0 18px rgba(var(--accent-rgb),0.55), 0 0 40px rgba(var(--accent-rgb),0.22); transform: scale(1.02); } 100% { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); transform: scale(1); } } .pg-drop-burst{ animation: pgDropBurst 520ms ease-out; } /* ========================================================= STEP 51 — MOBILE ONLY: FOOTER NAV DOCK + ACCOUNT OVERLAY (v1) Scope: MOBILE ONLY. Desktop/Tablet untouched. - Persistent footer dock (Option B) - Account overlay: full-screen sheet w/ grab handle + back stack + close ========================================================= */ /* ========================================================= MOBILE FOOTER NAV DOCK + OVERLAYS — VISIBILITY GUARD (Step-58) Goal: - Desktop/Tablet: NOTHING from the mobile dock/overlays should render or take layout space - Mobile (<=640px): dock renders normally and overlays can open ========================================================= */ /* Default (desktop/tablet): hard-hide the dock + overlays */ #pg-mobile-dock.pg-mobile-dock{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } #pg-mobile-tab-overlay.pg-mobile-overlay, #pg-mobile-account-overlay.pg-mobile-overlay{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* Ensure cursor/pointer is visible (devtools + inspection) */ html.zelen-gateway-embed, html.zelen-gateway-embed body, #crypto-gateway-demo-root{ cursor:auto !important; } /* Mobile nav mask: hides underlying gateway during overlay/tab transitions */ #pg-mobile-nav-mask{ display:none; position:fixed; inset:0; z-index:10070; /* below overlays (10080), above gateway */ background: rgba(6, 10, 12, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Mobile (<=640px): enable dock; overlays still hidden until opened */ @media (max-width: 640px){ html.pg-mnav-lock #pg-mobile-nav-mask{ display:block; } #pg-mobile-dock.pg-mobile-dock{ display:grid !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } /* Overlays: only show when opened */ #pg-mobile-tab-overlay.pg-mobile-overlay, #pg-mobile-account-overlay.pg-mobile-overlay{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } #pg-mobile-tab-overlay.pg-mobile-overlay.is-open, #pg-mobile-account-overlay.pg-mobile-overlay.is-open, #pg-mobile-tab-overlay[aria-hidden="false"], #pg-mobile-account-overlay[aria-hidden="false"]{ display:block !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; cursor:auto !important; } } :root{ --pg-dock-h: 78px; --pg-dock-pad-x: 14px; --pg-dock-top-radius: 14px; --pg-dock-bottom-radius: 5px; /* requested */ } /* ========================================================= MOBILE HERO HYBRID PAYMENT BUTTON (fresh) — MOBILE ONLY id: #pg-hybredpayment-hero-row / #pg-hybredpayment-hero Visual language: black-glass base (#050608) + cinematic edge highlights Hue source: --accent-rgb (already synced to featured asset) ========================================================= */ :root{ --pg-hph-rgb: var(--pg-active-coin-rgb, var(--accent-rgb)); } /* Desktop/Tablet safety: never show */ #pg-hybredpayment-hero-row{ display:none !important; } @media (max-width: 640px){ #pg-hybredpayment-hero-row{ display:block !important; position: fixed; left: 50%; transform: translateX(-50%); width: 95vw; /* spec: 95% */ max-width: 640px; height: 76px; /* spec */ bottom: calc(var(--pg-dock-h) + 10px); /* spec: 15px above dock */ z-index: 10055; /* above gateway, below overlays */ pointer-events: auto; /* allow taps/clicks on Pay by Card + Pay Now */ } #pg-hybredpayment-hero{ width: 100%; height: 76px; border-radius: 14px; /* locked */ position: relative; display:flex; overflow: visible; /* no outer-frame clipping; right pill handles its own */ background: #050608; /* black-glass base only (no container frame) */ /* Subtle base depth ONLY (no outline/frame) */ box-shadow: 0 12px 28px rgba(0,0,0,0.62); pointer-events: auto; } /* Container sheen removed (no outer container frame) */ #pg-hybredpayment-hero::before{ content:none !important; } /* Container under-glow removed (no outer container frame) */ #pg-hybredpayment-hero::after{ content:none !important; } .pg-hph-side{ height: 100%; border: 0; background: transparent; padding: 0; margin: 0; display:flex; align-items:center; justify-content:center; cursor: pointer; color: rgba(255,255,255,0.92); font-weight: 600; letter-spacing: 0.01em; user-select:none; pointer-events:auto; touch-action: manipulation; } .pg-hph-left{ flex: 0 0 44%; z-index: 1; border-top-left-radius: 14px; border-bottom-left-radius: 14px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; position: relative; /* Neutral dark glass */ background: radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 58%), linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); opacity: 0.95; } /* Pay-by-Card outline frame (ghosts out into the right pill) */ .pg-hph-left{ overflow: hidden; /* keep stroke clean on left radius */ } .pg-hph-left::after{ content:""; position:absolute; /* Match the raised right-pill outline height: right pill uses margin 6px top/bottom (height: calc(100% - 12px)) */ inset: 6px 0 6px 0; padding: 1px; /* stroke thickness */ border-radius: 14px 12px 12px 14px; pointer-events:none; /* Ghost stroke that fades INTO the right pill */ background: linear-gradient(90deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.16) 38%, rgba(var(--pg-hph-rgb),0.28) 70%, rgba(var(--pg-hph-rgb),0.00) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.90; } /* Divider: removed — the right side is a raised ghost-pill (SoT style) */ .pg-hph-divider{ display:none !important; } .pg-hph-right{ flex: 1 1 auto; position: relative; z-index: 3; /* sits above left side */ /* Raised ghost-pill geometry (no hard center line) */ margin: 6px 6px 6px -12px; /* overlap left for fused seam */ height: calc(100% - 12px); border-radius: 14px; overflow: hidden; /* Ghost outline: bright at left, fades toward far right edge */ border: 1px solid transparent; background: /* ONE primary hue interior (fills) + black-glass base */ radial-gradient(120% 180% at 22% 10%, rgba(var(--pg-hph-rgb),0.26), rgba(var(--pg-hph-rgb),0.08) 46%, rgba(0,0,0,0.00) 76%) padding-box, linear-gradient(180deg, rgba(var(--pg-hph-rgb),0.10), rgba(0,0,0,0.00) 70%) padding-box, linear-gradient(#050608,#050608) padding-box, /* Orbiting outline highlight (accent + white spec pop) */ conic-gradient(from var(--pg-hph-orbit), rgba(var(--pg-hph-rgb),0.00) 0deg, rgba(var(--pg-hph-rgb),0.00) 250deg, rgba(var(--pg-hph-rgb),0.85) 316deg, rgba(255,255,255,0.70) 334deg, rgba(var(--pg-hph-rgb),0.22) 346deg, rgba(var(--pg-hph-rgb),0.00) 360deg ) border-box, /* Ghost outline: bright at left, fades toward far right edge */ linear-gradient(90deg, rgba(var(--pg-hph-rgb),0.95) 0%, rgba(var(--pg-hph-rgb),0.55) 42%, rgba(var(--pg-hph-rgb),0.18) 74%, rgba(var(--pg-hph-rgb),0.00) 100% ) border-box; /* Depth + controlled bloom */ box-shadow: 0 16px 30px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 0 1px rgba(var(--pg-hph-rgb),0.18) inset, 0 0 26px rgba(var(--pg-hph-rgb),0.20); /* Orbit animation driver (custom angle animates the conic outline) */ --pg-hph-orbit: 0deg; animation: pgHphOrbit 7.8s linear infinite; } /* Seamless fused center seam (no hard line) */ .pg-hph-right::before{ content:""; position:absolute; left:-34px; top:0; bottom:0; width: 90px; pointer-events:none; background: radial-gradient(80% 140% at 60% 50%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 66%), radial-gradient(70% 160% at 60% 50%, rgba(var(--pg-hph-rgb),0.18), rgba(var(--pg-hph-rgb),0.00) 70%); filter: blur(0.2px); opacity: 0.92; } /* Subtle animated sweep (luxury) — toned down */ .pg-hph-right::after{ content:""; position:absolute; inset:-30% -30%; pointer-events:none; background: linear-gradient(105deg, rgba(255,255,255,0.00) 40%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.00) 60%); transform: translateX(-35%); opacity: 0.18; animation: pgHphSweep 4.6s ease-in-out infinite; mix-blend-mode: screen; } @keyframes pgHphSweep{ 0%{ transform: translateX(-42%) rotate(0.001deg); } 55%{ transform: translateX(18%) rotate(0.001deg); } 100%{ transform: translateX(42%) rotate(0.001deg); } } /* Orbit: subtle rotating highlight around the Connect Wallet outline */ @property --pg-hph-orbit{ syntax: ""; inherits: true; initial-value: 0deg; } @keyframes pgHphOrbit{ to{ --pg-hph-orbit: 360deg; } } /* Typography: match the "asset name" vibe (pg-asset-label-sub) — clean + slightly luminous */ .pg-hph-text{ font-size: 15px; line-height: 1; padding: 0 12px; text-shadow: 0 1px 0 rgba(0,0,0,0.55); opacity: 0.92; } .pg-hph-right-text{ display:flex; flex-direction: column; align-items: center; justify-content:center; gap: 3px; font-size: 18px; font-weight: 600; letter-spacing: 0.1em; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,0.60), 0 0 10px rgba(var(--pg-hph-rgb),0.12); opacity: 0.96; } .pg-hph-line1, .pg-hph-line2{ display:block; } /* Keep text to EXACTLY two lines on the right side */ .pg-hph-line1{ white-space: nowrap; } .pg-hph-line2{ white-space: nowrap; } /* Make sure the buttons are clickable later (but no handlers now) */ #pg-hybredpayment-hero .pg-hph-side{ pointer-events:auto; } } /* Give the main card enough room so content never hides behind the dock */ .pg-card{ padding-bottom: calc(18px + var(--pg-dock-h)) !important; } /* ---------- Footer Dock Shell ---------- */ .pg-mobile-dock{ position: fixed; left: 0; right: 0; bottom: 0; height: var(--pg-dock-h); z-index: 10120; display: grid; place-items: center; padding: 8px var(--pg-dock-pad-x) 10px; box-sizing: border-box; background: rgba(8, 12, 14, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(255,255,255,0.18); /* Unicorn Sprinkles: crisp seam */ box-shadow: 0 -10px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-rgb, 0,255,213), 0.08) inset; border-top-left-radius: 0px; /* Unicorn Sprinkles: square top */ border-top-right-radius: 0px; /* Unicorn Sprinkles: square top */ border-bottom-left-radius: var(--pg-dock-bottom-radius); /* ============================ ZELEN Dock Style: "Unicorn Sprinkles" Edge Bloom Gradient (a.k.a. Neon Under-Glow) Quick pulse on tab change: strong burst → elegant settle Timing: 520ms cubic-bezier(0.16, 1, 0.3, 1) ============================ */ .pg-mobile-dock::before{ content:""; position:absolute; left: 14px; right: 14px; top: -1px; /* sit on the seam */ height: 3px; pointer-events:none; opacity: 0.42; /* elegant resting glow */ transform: scaleX(1); transform-origin: 50% 50%; background: radial-gradient(60% 240% at 50% 50%, rgba(var(--accent-rgb, 0,255,213), 0.78) 0%, rgba(var(--accent-rgb, 0,255,213), 0.36) 35%, rgba(var(--accent-rgb, 0,255,213), 0.00) 72%); filter: blur(7px); } .pg-mobile-dock.pg-dock-pulse::before{ animation: pgDockEdgeBloomPulse 520ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes pgDockEdgeBloomPulse{ 0% { opacity: 0.00; transform: scaleX(0.86); filter: blur(12px); } 18% { opacity: 1.00; transform: scaleX(1.00); filter: blur(10px); } 100% { opacity: 0.42; transform: scaleX(1.00); filter: blur(7px); } } border-bottom-right-radius: var(--pg-dock-bottom-radius); } .pg-dock-row{ width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: center; } .pg-dock-btn{ -webkit-tap-highlight-color: transparent; appearance: none; border: 0; background: transparent; padding: 6px 4px; display: grid; grid-template-rows: 28px 16px; justify-items: center; align-items: center; gap: 6px; cursor: pointer; user-select: none; /* Off-state: readable but subdued */ color: rgba(255,255,255,0.72); } /* ICONS - SVGs: drive stroke/fill from currentColor so Brand color can flow through - IMG fallbacks: keep opacity handling (in case an old build injects PNGs) */ svg.pg-dock-ico{ width: 24px; height: 24px; display: block; opacity: 0.72; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transition: transform 120ms ease, opacity 120ms ease, filter 140ms ease; } svg.pg-dock-ico [stroke]{ stroke: currentColor !important; } svg.pg-dock-ico [fill]:not([fill="none"]){ fill: currentColor !important; } img.pg-dock-ico{ width: 24px; height: 24px; display: block; object-fit: contain; opacity: 0.72; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transition: transform 120ms ease, opacity 120ms ease, filter 140ms ease; } .pg-dock-label{ font-size: 11px; letter-spacing: 0.2px; color: rgba(255,255,255,0.72); transition: color 120ms ease, opacity 120ms ease; white-space: nowrap; } /* Active / pressed (app-like) */ .pg-dock-btn:active .pg-dock-ico{ transform: scale(0.95); } /* Active state: - Icon color = Brand color (widget builder) - Label = pure white - Glow uses Brand color */ .pg-dock-btn.is-active{ color: rgb(var(--accent-rgb, 0,255,213)); } .pg-dock-btn.is-active .pg-dock-ico{ opacity: 1; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb, 0,255,213), 0.42)) drop-shadow(0 0 18px rgba(var(--accent-rgb, 0,255,213), 0.24)); } .pg-dock-btn.is-active .pg-dock-label{ color: #ffffff; } .pg-dock-btn.is-disabled{ opacity: 0.35; pointer-events: none; } /* ---------- Generic Overlay Shell (for tabs) ---------- */ .pg-mobile-overlay{ display:none; } .pg-mobile-overlay.is-open{ display:block; } .pg-mobile-overlay{ position: fixed; inset: 0; z-index: 10080; /* 10–15% backdrop as requested */ background: rgba(0,0,0,0.15); } html.pg-mnav-lock, body.pg-mnav-lock{ overflow: hidden !important; } .pg-mo-sheet{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: radial-gradient(1200px 900px at 35% -10%, rgba(var(--accent-rgb, 0,255,213), 0.18), rgba(0,0,0,0) 55%), radial-gradient(900px 700px at 90% 15%, rgba(255,255,255,0.08), rgba(0,0,0,0) 55%), rgba(6,10,12,0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: grid; grid-template-rows: 18px 58px 1fr; padding: 10px 16px calc(16px + var(--pg-dock-h) + env(safe-area-inset-bottom)); box-sizing: border-box; border-top-left-radius: 22px; border-top-right-radius: 22px; animation: pgMoIn 200ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; } @keyframes pgMoIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } } .pg-mo-handle{ width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.22); justify-self: center; align-self: center; } .pg-mo-header{ display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; color: rgba(255,255,255,0.92); } .pg-mo-back, .pg-mo-close{ width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22); color: rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; cursor:pointer; } .pg-mo-back.is-hidden{ visibility: hidden; pointer-events:none; } .pg-mo-title{ font-size: 20px; font-weight: 800; letter-spacing: 0.2px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-mo-content{ overflow: auto; -webkit-overflow-scrolling: touch; padding-top: 8px; } /* ---------- Account “card rows” (premium, not line-links) ---------- */ .pg-acct-card{ border-radius: 20px; border: 1px solid rgba(var(--accent-rgb, 0,255,213), 0.22); background: rgba(0,0,0,0.24); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 18px 40px rgba(0,0,0,0.35); overflow: hidden; margin-bottom: 12px; } .pg-acct-row{ display:grid; grid-template-columns: 34px 1fr auto 18px; align-items:center; gap: 10px; padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); } .pg-acct-row:last-child{ border-bottom: 0; } .pg-acct-ico{ width: 28px; height: 28px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 0,255,213), 0.08) inset; color: rgba(255,255,255,0.9); } .pg-acct-label{ font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); } .pg-acct-sub{ font-size: 12px; color: rgba(255,255,255,0.58); margin-top: 2px; } .pg-acct-meta{ font-size: 12px; color: rgba(255,255,255,0.58); max-width: 130px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-acct-chevron{ opacity: 0.55; } .pg-acct-tap{ cursor:pointer; -webkit-tap-highlight-color: transparent; } .pg-acct-tap:active{ transform: scale(0.995); } .pg-acct-section-title{ font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.58); margin: 10px 2px 10px; } .pg-acct-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 10px 2px 10px; } .pg-acct-head .pg-acct-section-title{ margin:0; } .pg-acct-edit-btn{ appearance:none; border:1px solid rgba(var(--accent-rgb, 0,255,213), 0.34); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.92); border-radius: 999px; height: 34px; padding: 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; display:inline-flex; align-items:center; justify-content:center; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 22px rgba(0,0,0,0.24); -webkit-tap-highlight-color: transparent; } .pg-acct-edit-btn:active{ transform: scale(0.985); } .pg-acct-row.pg-acct-row-wrap{ align-items:flex-start; } .pg-acct-row.pg-acct-row-wrap .pg-acct-sub{ white-space: normal; word-break: break-word; line-height: 1.35; } /* ========================================================= STEP 1139 — MOBILE ACCOUNT DEMO INDUSTRY PROFILE SELECTOR Scope: Account overlay UI + demo/admin profile theme hooks only. No Radom/session/wallet trigger changes. ========================================================= */ .pg-acct-card.pg-acct-demo-card{ border-color: rgba(var(--pg-demo-brand-rgb, 232,24,61), 0.46); box-shadow: 0 0 0 1px rgba(var(--pg-demo-brand-rgb, 232,24,61),0.18) inset, 0 18px 40px rgba(0,0,0,0.35), 0 0 26px rgba(var(--pg-demo-brand-rgb, 232,24,61),0.12); } .pg-acct-row.pg-acct-demo-row{ grid-template-columns: 34px minmax(0,1fr) auto 18px; border-bottom:0; background: radial-gradient(220px 90px at 100% 50%, rgba(var(--pg-demo-brand-rgb, 232,24,61),0.12), rgba(0,0,0,0) 62%), rgba(0,0,0,0.12); } .pg-acct-demo-row .pg-acct-ico{ color: rgba(255,255,255,0.94); border-color: rgba(var(--pg-demo-brand-rgb, 232,24,61),0.34); background: rgba(var(--pg-demo-brand-rgb, 232,24,61),0.16); box-shadow: 0 0 0 1px rgba(var(--pg-demo-brand-rgb, 232,24,61),0.20) inset, 0 0 16px rgba(var(--pg-demo-brand-rgb, 232,24,61),0.16); } .pg-acct-demo-main{ min-width:0; } .pg-acct-demo-right{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; min-width:0; } .pg-acct-demo-value{ font-size: 12px; line-height:1; color: rgb(var(--pg-demo-brand-rgb, 232,24,61)); font-weight: 800; max-width: 118px; text-align:right; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow: 0 0 14px rgba(var(--pg-demo-brand-rgb, 232,24,61),0.20); } .pg-acct-demo-pill{ display:inline-flex; align-items:center; justify-content:center; height:22px; padding:0 9px; border-radius:999px; font-size:11px; line-height:1; font-weight:800; color: rgba(255,255,255,0.92); border:1px solid rgba(var(--pg-demo-brand-rgb, 232,24,61),0.38); background: rgba(var(--pg-demo-brand-rgb, 232,24,61),0.24); box-shadow:0 0 15px rgba(var(--pg-demo-brand-rgb, 232,24,61),0.14); } .pg-acct-profile-logo{ width:112px; max-width:112px; height:26px; object-fit:contain; display:none; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.34)); } .pg-acct-profile-logo.is-visible{ display:block; } .pg-demo-profile-note{ margin: -2px 2px 14px; font-size:12px; line-height:1.35; color: rgba(255,255,255,0.62); } .pg-demo-options{ display:flex; flex-direction:column; gap:12px; margin-top:12px; } .pg-demo-option{ appearance:none; width:100%; min-height:70px; border-radius:16px; border:1px solid rgba(var(--accent-rgb,0,255,213),0.22); background: rgba(0,0,0,0.22); color: rgba(255,255,255,0.92); display:grid; grid-template-columns:52px 1fr 24px; align-items:center; gap:12px; padding:10px 12px; text-align:left; box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset; cursor:pointer; -webkit-tap-highlight-color:transparent; } .pg-demo-option.is-selected{ border-color: rgba(var(--pg-demo-option-rgb, var(--accent-rgb,0,255,213)),0.86); box-shadow: 0 0 0 1px rgba(var(--pg-demo-option-rgb, var(--accent-rgb,0,255,213)),0.34) inset, 0 0 28px rgba(var(--pg-demo-option-rgb, var(--accent-rgb,0,255,213)),0.18); } .pg-demo-option-logoWrap{ width:46px; height:46px; border-radius:999px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:rgba(255,255,255,0.94); border:1px solid rgba(255,255,255,0.12); } .pg-demo-option-logoWrap.pg-demo-blaze-logoWrap{ background: rgba(27,197,233,0.12); } .pg-demo-option-logo{ width:38px; max-width:38px; height:auto; display:block; object-fit:contain; } .pg-demo-option-title{ font-size:14px; font-weight:800; line-height:1.1; } .pg-demo-option-sub{ margin-top:4px; font-size:12px; color:rgba(255,255,255,0.62); line-height:1.2; } .pg-demo-option-check{ width:22px; height:22px; border-radius:999px; border:2px solid rgba(255,255,255,0.34); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:#fff; } .pg-demo-option.is-selected .pg-demo-option-check{ border-color:rgba(var(--pg-demo-option-rgb, var(--accent-rgb,0,255,213)),1); background:rgb(var(--pg-demo-option-rgb, var(--accent-rgb,0,255,213))); } .pg-demo-apply{ margin-top:24px; width:100%; height:54px; border:0; border-radius:14px; color:#fff; font-size:16px; font-weight:850; background:linear-gradient(135deg, rgb(var(--pg-demo-brand-rgb,232,24,61)), rgba(var(--pg-demo-brand-rgb,232,24,61),0.78)); box-shadow:0 18px 34px rgba(var(--pg-demo-brand-rgb,232,24,61),0.22); } html.pg-demo-profile-livenation #pg-mobile-account-overlay{ --pg-demo-brand-rgb: 232,24,61; } html.pg-demo-profile-ticketmaster #pg-mobile-account-overlay{ --pg-demo-brand-rgb: 0,108,227; } .pg-demo-option-logoWrap.pg-demo-ticketmaster-logoWrap{ background: rgba(255,255,255,0.96); } .pg-demo-option-logoWrap.pg-demo-ticketmaster-logoWrap .pg-demo-option-logo{ width:42px; max-width:42px; } /* View switching */ .pg-mo-view{ display:none; } .pg-mo-view.is-active{ display:block; } } /* ========================================================= STEP 69 — MOBILE ONLY: HERO HEADER (BLAZE + ZELEN PAY) - Visual-only redesign (no functional changes) - Keeps existing Order Details toggle functionality intact - Reverted: NO "Company Details" overlay changes Scope: MOBILE ONLY (<=640px). Desktop/Tablet untouched. ========================================================= */ @media (max-width: 640px){ /* --- Header shell / hero background --- */ #pg-order-summary{ /* HERO GLOW = Widget Builder brand color */ --pg-hero-rgb: var(--accent-rgb, 0,255,213); position: sticky !important; top: 0 !important; z-index: 10050 !important; /* Full-bleed across the device (cancel parent padding) */ margin: -16px -14px 14px -14px !important; width: calc(100% + 28px) !important; /* Logo row sits 20px down from top edge */ padding: 20px 0 12px !important; /* Full-width bar: NO top radius, only bottom corners */ border-radius: 0 0 18px 18px !important; overflow: hidden !important; /* Smokey charcoal / glass (NO brand-color bleed in the BG) */ background: radial-gradient(1100px 260px at 50% -40px, rgba(255,255,255,0.10), rgba(0,0,0,0) 62%), linear-gradient(180deg, rgba(7,9,10,0.94) 0%, rgba(4,6,7,0.86) 100%) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: /* outer hero aura (brand color) */ 0 0 34px rgba(var(--pg-hero-rgb), 0.2), 0 0 12px rgba(var(--pg-hero-rgb), 0.0), 0 18px 42px rgba(0,0,0,0.62), /* clean single edge (prevents “double outline” look) */ 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(var(--pg-hero-rgb), 0.16), /* bottom pin-line definition (brand color) */ inset 0 -1px 0 rgba(var(--pg-hero-rgb), 0.32), inset 0 -14px 28px rgba(var(--pg-hero-rgb), 0.08); } /* Subtle micro-texture (very light) */ #pg-order-summary::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0.06; background-image: radial-gradient(circle at 14% 28%, rgba(255,255,255,0.35) 0 1px, rgba(255,255,255,0) 2px), radial-gradient(circle at 34% 72%, rgba(255,255,255,0.22) 0 1px, rgba(255,255,255,0) 2px), radial-gradient(circle at 78% 44%, rgba(255,255,255,0.24) 0 1px, rgba(255,255,255,0) 2px); filter: blur(0.25px); } /* Bottom seam: Edge Bloom Gradient (Neon Under-Glow) */ #pg-order-summary::after{ /* Bottom under-glow seam (brand color) */ content:""; position:absolute; left:0; right:0; bottom:-2px; height: 10px; pointer-events:none; background: radial-gradient(80% 140% at 50% 20%, rgba(var(--pg-hero-rgb), 0.70) 0%, rgba(var(--pg-hero-rgb), 0.24) 42%, rgba(var(--pg-hero-rgb), 0.00) 75%); opacity: 0.70; filter: blur(8px); } /* Content padding (keeps header background full-bleed, but aligns logos/text) */ #pg-order-summary .pg-os-row{ padding-left: 14px !important; padding-right: 14px !important; } /* --- Layout: logo row + merchant/total row --- */ .pg-os-row{ display:grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: 34px 28px !important; column-gap: 6px !important; /* tighter spacing to match SoT */ row-gap: 10px !important; align-items:center !important; } /* Logo row container */ .pg-os-title{ grid-column: 1 / -1 !important; grid-row: 1 !important; display:flex !important; align-items:center !important; justify-content: space-between !important; gap: 6px !important; /* tighter spacing to match SoT */ min-width: 0 !important; position: relative !important; padding-bottom: 8px !important; /* space for the logo separator glow */ } /* SWAP POSITIONS: - Merchant logo LEFT - ZELEN PAY brand RIGHT */ .pg-os-title #pg-os-merchant-logo{ order: 1 !important; } .pg-os-title .pg-os-brand{ order: 2 !important; } /* Logo sizing */ .pg-os-title #pg-os-merchant-logo, .pg-os-title .pg-os-brand{ height: 26px !important; width: auto !important; object-fit: contain !important; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.38)); } .pg-os-title #pg-os-merchant-logo{ max-width: 66% !important; } .pg-os-title .pg-os-brand{ max-width: 34% !important; opacity: 0.92 !important; } /* Hero separator UNDER the logo row (between logos and company/total) */ .pg-os-title::after{ content:""; position:absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events:none; background: linear-gradient(90deg, rgba(var(--pg-hero-rgb), 0.00) 0%, rgba(var(--pg-hero-rgb), 0.20) 14%, rgba(var(--pg-hero-rgb), 0.95) 50%, rgba(var(--pg-hero-rgb), 0.20) 86%, rgba(var(--pg-hero-rgb), 0.00) 100%); opacity: 0.85; filter: blur(0.25px); box-shadow: 0 0 14px rgba(var(--pg-hero-rgb), 0.22); } /* Merchant name row (this is the visible "ABC Dispensary") */ .pg-os-merchant{ grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important; display:inline-flex !important; align-items:center !important; gap: 10px !important; /* carrot exactly 10px from name */ font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; color: rgba(255,255,255,0.88) !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Remove dot + "Online Order" on mobile for clean header */ .pg-os-dot{ display:none !important; } .pg-os-merchant > span{ display:none !important; } /* Carrot indicator (inline, 10px gap handled by flex) */ .pg-os-merchant::after{ content:""; display:inline-block; font-size: 22px; line-height: 1; opacity: 0.90; color: rgba(var(--pg-hero-rgb,0,255,213), 0.95); filter: drop-shadow(0 0 10px rgba(var(--pg-hero-rgb,0,255,213), 0.34)); } /* Keep original toggle functional: invisible hit area aligned over merchant row */ #pg-os-toggle.pg-os-details-btn{ grid-column: 1 !important; grid-row: 2 !important; position: relative !important; width: 100% !important; height: 28px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; opacity: 0 !important; z-index: 5 !important; cursor: pointer !important; } #pg-os-toggle.pg-os-details-btn .pg-os-caret{ display:none !important; } /* Total on the right */ .pg-os-right{ grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; text-align: right !important; display:flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; } .pg-os-right .pg-os-meta{ display:none !important; } .pg-os-right .pg-os-total{ margin: 0 !important; /* reset all sides */ margin-top: 20px !important; /* LOWER (increase to go lower) */ margin-left: 14px !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: 0.1px !important; color: rgba(255,255,255,0.96) !important; text-shadow: 0 10px 20px rgba(0,0,0,0.58); } .pg-os-right .pg-os-total #pg-order-total-display{ font-weight: 800 !important; } /* Optional: ensure visible row also shows pointer for Firefox hover testing */ .pg-os-merchant{ cursor: pointer !important; } } /* ========================================================= STEP 75.1 — MOBILE HOME CLEANUP (HIDE FEATURES) Goal: Create room for the HERO "Choose Asset & Pay" section (no-scroll Home). Scope: MOBILE ONLY (<=520px). Desktop/Tablet untouched. NOTE: We are NOT removing functionality—only hiding these legacy UI blocks on MOBILE. ========================================================= */ @media (max-width: 520px){ /* 1) Hide customer strip (Edit details / name row) */ #pg-customer, .pg-customer{ display: none !important; } /* 2) Hide stepper (Details / Payment / Confirm) */ #pg-stepper, .pg-stepper{ display: none !important; } /* 3) Hide legacy payment type tiles + asset tiles column block (will be replaced by HERO carousel) */ #pg-pay-asset-split, .pg-pay-asset-split{ display: none !important; } /* 4) Hide legacy "Continue · Connect Wallet / Back to payment types" actions (replaced by HERO hybrid button) */ #pg-crypto-section, #pg-crypto-section > div{ display: none !important; } /* Tighten header spacing now that stepper + split are hidden */ .pg-card-header{ margin-bottom: 0 !important; padding-bottom: 0 !important; gap: 8px !important; } /* Ensure no accidental scrollbars during HERO build stage */ html, body{ overflow-x: hidden !important; } } /* ========================================================= STEP 77.1 — MOBILE HOME FINAL CLEANUP Hide residual crypto continue / back links (MOBILE ONLY) ========================================================= */ @media (max-width: 520px){ #pg-crypto-continue, #pg-crypto-back{ display: none !important; } } /* ========================================================= STEP 78.1 — MOBILE HOME: REMOVE BLANK SCROLL + FAINT SEAM Goal: No-scroll HOME while HERO module is being built Scope: MOBILE ONLY (<=520px). Desktop/Tablet untouched. ========================================================= */ @media (max-width: 520px){ /* The mobile dock is fixed; earlier global rules add large bottom padding to ALL cards. For HOME we want a clean canvas, so remove the extra dock-padding on the MAIN card only. */ .pg-main-card.pg-card{ padding-bottom: 14px !important; /* was calc(18px + var(--pg-dock-h)) */ margin-bottom: 0 !important; } /* Remove any stray horizontal separators that can show up in the empty HOME body */ .pg-main-card hr, .pg-main-card .pg-od-divider, .pg-main-card .pg-divider, .pg-main-card .pg-sep, .pg-main-card .pg-separator{ display: none !important; } /* Defensive: prevent tiny overflow from rounding/glow while Home is empty */ #crypto-gateway-demo-root{ overflow-x: hidden !important; } } /* ========================================================= STEP 81 — MOBILE HOME: HERO ASSET CAROUSEL + META + HYBRID Scope: MOBILE ONLY (<=520px). Desktop/Tablet untouched. Notes: Keeps existing IDs so Radom/WC hooks remain intact. ========================================================= */ @media (max-width: 520px){ /* Show the split wrapper again (we'll hide only the left payment-type column) */ #pg-pay-asset-split, .pg-pay-asset-split{ display: block !important; margin-top: 6px !important; } /* Hide payment type tiles + rewards code (mobile default is crypto) */ #pg-pay-asset-split .pg-pay-col{ display: none !important; } /* HERO column becomes full-width */ #pg-asset-col{ width: 100% !important; max-width: none !important; margin: 0 !important; } /* Hide the old "Select Digital Asset" label (hero title already exists) */ #pg-crypto-step-label{ display: none !important; } /* === ASSET CAROUSEL ROW === */ /* Move hero title up a touch (requested: -20px) */ .pg-title{ margin-top: -40px !important; } #pg-asset-row{ width: 100% !important; /* requested */ margin-top: 35px !important; padding: 10px 15px 5px !important; /* tuned: 10px top / 5px bottom */ display: flex !important; align-items: flex-end !important; gap: 3px !important; /* tighter spacing to match SoT */ overflow-x: hidden !important; /* JS-driven carousel; prevent native scroll fight */ overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; scroll-padding: 50% !important; /* centers snaps nicely */ scrollbar-width: none !important; position: relative !important; touch-action: none !important; /* JS handles drag; blocks page/row scroll */ overscroll-behavior: none !important; contain: layout !important; /* allow glows to render outside */ isolation: isolate !important; background: radial-gradient(140% 130% at 50% 85%, rgba(0,0,0,0.55), rgba(0,0,0,0.00) 60%) !important; } #pg-asset-row::-webkit-scrollbar{ display:none !important; } /* Edge breathing room so the side tiles/glows never kiss the screen edge */ #pg-asset-row::before, #pg-asset-row::after{ content:""; flex: 0 0 32px; /* edge gutter (tighter so flank tiles sit closer) */ height: 1px; } /* Per-asset glow hues (used for active hero ring) */ #pg-asset-row .pg-asset-pill[data-asset="BTC"]{ --coin-rgb: 255,146,36; } #pg-asset-row .pg-asset-pill[data-asset="ETH"]{ --coin-rgb: 120,190,255; } #pg-asset-row .pg-asset-pill[data-asset="ZLNC"]{ --coin-rgb: var(--accent-rgb); } #pg-asset-row .pg-asset-pill[data-asset="USDT"]{ --coin-rgb: 42,232,186; } #pg-asset-row .pg-asset-pill[data-asset="XRP"]{ --coin-rgb: 235,240,255; } #pg-asset-row .pg-asset-pill[data-asset="BNB"]{ --coin-rgb: 255,206,77; } #pg-asset-row .pg-asset-pill[data-asset="BASE"]{ --coin-rgb: 0,133,255; } #pg-asset-row .pg-asset-pill[data-asset="DOGE"]{ --coin-rgb: 201,160,74; } #pg-asset-row .pg-asset-pill[data-asset="TRX"]{ --coin-rgb: 255,52,52; } #pg-asset-row .pg-asset-pill[data-asset="LTC"]{ --coin-rgb: 164,170,176; } #pg-asset-row .pg-asset-pill[data-asset="SOL"]{ --coin-rgb: 139,92,246; } #pg-asset-row .pg-asset-pill[data-asset="AVAX"]{ --coin-rgb: 226,72,92; } #pg-asset-row .pg-asset-pill[data-asset="USDC"]{ --coin-rgb: 39,117,202; } #pg-asset-row .pg-asset-pill[data-asset="MATIC"]{ --coin-rgb: 130,71,229; } #pg-asset-row .pg-asset-pill[data-asset="DOT"]{ --coin-rgb: 232,30,99; } .pg-mobile-only-asset{ display:none !important; } @media (max-width: 640px){ #pg-asset-row .pg-mobile-only-asset{ display:flex !important; } } /* Base tile (transition state) — reduced by ~20% from 84px */ #pg-asset-row .pg-asset-pill{ flex: 0 0 auto !important; width: 109px !important; height: 109px !important; border-radius: 20px !important; display: grid !important; place-items: center !important; position: relative !important; scroll-snap-align: center !important; background: radial-gradient(120px 120px at 30% 25%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 58%), linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.38) !important; transform: translateZ(0) scale(0.80) !important; /* JS will animate to sweet spot */ opacity: 0.92 !important; transition: box-shadow 220ms ease, border-color 220ms ease !important; will-change: transform, filter, opacity; z-index: 2 !important; } #pg-asset-row .pg-asset-pill .pg-asset-fav{ position:absolute; top:12px; right:12px; width:22px; height:22px; padding:0; margin:0; border:0; outline:none; background:transparent; opacity:0; transform: scale(0.82); pointer-events:none; transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease; z-index:8; -webkit-tap-highlight-color: transparent; touch-action:none; user-select:none; -webkit-user-select:none; } #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-fav{ opacity:1; transform: scale(1); pointer-events:auto; } #pg-asset-row .pg-asset-pill, #pg-asset-row .pg-asset-pill *, #pg-asset-row .pg-asset-pill .pg-asset-symbol, #pg-asset-row .pg-asset-pill .pg-asset-logo{ -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; } #pg-asset-row .pg-asset-pill .pg-asset-symbol, #pg-asset-row .pg-asset-pill .pg-asset-logo{ pointer-events:none !important; } #pg-asset-row .pg-asset-pill .pg-asset-logo{ -webkit-user-drag:none; user-drag:none; } #pg-asset-row .pg-asset-pill .pg-asset-fav::before{ content:""; position:absolute; inset:0; background:#05070a; -webkit-mask: url("https://irp.cdn-website.com/630a36f4/dms3rep/multi/favorite-asset-SVG.svg") center/contain no-repeat; mask: url("https://irp.cdn-website.com/630a36f4/dms3rep/multi/favorite-asset-SVG.svg") center/contain no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 12px rgba(0,0,0,0.34), 0 2px 8px rgba(0,0,0,0.48); filter: drop-shadow(0 0 6px rgba(0,0,0,0.72)) drop-shadow(0 2px 6px rgba(0,0,0,0.42)); transition: background 180ms ease, filter 180ms ease, transform 180ms ease; } #pg-asset-row .pg-asset-pill.pg-asset-favorite .pg-asset-fav::before{ background: rgb(var(--coin-rgb, 255,255,255)); filter: drop-shadow(0 0 6px rgba(0,0,0,0.84)) drop-shadow(0 2px 8px rgba(0,0,0,0.58)) drop-shadow(0 0 10px rgba(var(--coin-rgb, 255,255,255),0.18)); } #pg-asset-row .pg-asset-pill.pg-asset-fav-holding .pg-asset-fav::before{ transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(0,0,0,0.86)) drop-shadow(0 2px 10px rgba(0,0,0,0.62)) drop-shadow(0 0 14px rgba(var(--coin-rgb, 255,255,255),0.24)); } #pg-asset-row .pg-asset-pill.pg-asset-fav-pop .pg-asset-fav::before{ animation: pgAssetFavPop 360ms cubic-bezier(.2,.9,.2,1) 1; } @keyframes pgAssetFavPop{ 0%{ transform: scale(0.86); } 58%{ transform: scale(1.18); } 100%{ transform: scale(1); } } /* Calm aura behind every tile (kept subtle) */ #pg-asset-row .pg-asset-pill::before{ content:""; position:absolute; inset: -10px; border-radius: 26px; background: radial-gradient(70% 70% at 50% 55%, rgba(var(--accent-rgb),0.18), rgba(0,0,0,0) 70%); opacity: 0.25; filter: blur(6px); pointer-events:none; transition: opacity 220ms ease, filter 220ms ease; } /* Specular highlight */ #pg-asset-row .pg-asset-pill::after{ content:""; position:absolute; left: 10px; top: 9px; width: 56%; height: 46%; border-radius: 18px; background: radial-gradient(70% 80% at 30% 30%, rgba(255,255,255,0.26), rgba(255,255,255,0.00) 68%); opacity: 0.18; filter: blur(0.2px); pointer-events:none; } /* Labels: ACTIVE uses clean bottom label; SIDE tiles use short ticker (ETH/BTC/USDT) */ #pg-asset-row .pg-asset-pill > div:last-child{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; } /* ACTIVE (featured): show the bottom label only (clean text, no container) */ #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-label-main{ display:none !important; } #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-label-sub{ display:block !important; margin-top: -5px !important; /* moved up 15px */ padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 12px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.82) !important; line-height: 1 !important; } /* TX pending countdown replaces the full-name sub label */ #crypto-gateway-demo-root.pg-tx-countdown-active #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-label-sub{ margin-top: -5px !important; font-size: 18px !important; font-weight: 450 !important; letter-spacing: 0.32em !important; text-transform: none !important; color: rgba(255,255,255,0.98) !important; text-shadow: 0 2px 0 rgba(0,0,0,0.72), 0 6px 18px rgba(0,0,0,0.82), 0 0 14px rgba(0,0,0,0.36); } #crypto-gateway-demo-root.pg-tx-countdown-active #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-label-sub::before{ content:""; position:absolute; left:50%; top:50%; width:72px; height:22px; transform: translate(-50%,-50%); border-radius:999px; background: radial-gradient(60% 100% at 50% 50%, rgba(0,0,0,0.42), rgba(0,0,0,0.18) 62%, rgba(0,0,0,0.00) 100%); filter: blur(4px); z-index:-1; pointer-events:none; } #crypto-gateway-demo-root.pg-tx-countdown-active #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-label-sub[data-tx-countdown]{ position:relative !important; display:inline-block !important; } /* TX complete: freeze the active ring, swap logo to a centered check, and replace timer text with COMPLETED */ #crypto-gateway-demo-root.pg-tx-complete-label-active #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-label-sub{ position:relative !important; display:inline-block !important; margin-top: -5px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.92) !important; text-shadow: 0 2px 0 rgba(0,0,0,0.68), 0 6px 18px rgba(0,0,0,0.78), 0 0 14px rgba(0,0,0,0.34); transition: opacity .18s ease, transform .22s ease; } #crypto-gateway-demo-root.pg-tx-complete-label-active #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-label-sub.is-tx-complete-swapping{ opacity: 0 !important; transform: translateY(4px) scale(0.98); } #crypto-gateway-demo-root.pg-tx-complete-label-active #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-label-sub::before{ content:""; position:absolute; left:50%; top:50%; width:108px; height:22px; transform: translate(-50%,-50%); border-radius:999px; background: radial-gradient(60% 100% at 50% 50%, rgba(0,0,0,0.42), rgba(0,0,0,0.18) 62%, rgba(0,0,0,0.00) 100%); filter: blur(4px); z-index:-1; pointer-events:none; } @media (max-width: 520px){ #crypto-gateway-demo-root.pg-tx-asset-ring-freeze #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol{ overflow: visible !important; isolation: isolate; } #crypto-gateway-demo-root.pg-tx-asset-ring-freeze #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > .pg-tx-ring-clone, #crypto-gateway-demo-root.pg-tx-asset-ring-freeze #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > .pg-tx-ring-aura{ position:absolute; display:block; border-radius:999px; pointer-events:none; } #crypto-gateway-demo-root.pg-tx-asset-ring-freeze #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > .pg-tx-ring-clone{ inset:-10px; z-index:1; opacity:0.98; transform: rotate(326deg) scale(1); filter: drop-shadow(0 0 12px rgba(var(--coin-rgb, var(--accent-rgb)),0.34)) drop-shadow(0 0 24px rgba(var(--coin-rgb, var(--accent-rgb)),0.22)); animation:none !important; } #crypto-gateway-demo-root.pg-tx-asset-ring-freeze #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > .pg-tx-ring-aura{ inset:-15px; z-index:0; opacity:0.44; filter: blur(1.35px); animation:none !important; } #crypto-gateway-demo-root.pg-tx-complete-hero #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol{ position:relative !important; overflow: visible !important; isolation:isolate !important; } /* STEP-321 — Mobile complete hero: prep-lock the logo + checkmark as centered overlays BEFORE the swap starts */ #crypto-gateway-demo-root.pg-tx-complete-hero #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol, #crypto-gateway-demo-root.pg-tx-complete-hero.pg-hero-order-complete-prep #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol{ position:relative !important; overflow:visible !important; isolation:isolate !important; } #crypto-gateway-demo-root.pg-tx-complete-hero #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > img.pg-asset-logo, #crypto-gateway-demo-root.pg-tx-complete-hero.pg-hero-order-complete-prep #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > img.pg-asset-logo{ position:absolute !important; left:50% !important; top:50% !important; width:48px !important; height:48px !important; max-width:none !important; min-width:0 !important; object-fit:contain !important; display:block !important; flex:none !important; flex-shrink:0 !important; margin:0 !important; z-index:3 !important; pointer-events:none !important; transform:translate(-50%,-50%) !important; transform-origin:50% 50% !important; opacity:1 !important; filter:none !important; transition: opacity .20s ease, filter .20s ease !important; } #crypto-gateway-demo-root.pg-tx-complete-hero #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > img.pg-hero-order-complete-checkmark, #crypto-gateway-demo-root.pg-tx-complete-hero.pg-hero-order-complete-prep #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > img.pg-hero-order-complete-checkmark{ position:absolute !important; left:50% !important; top:50% !important; width:81px !important; height:59px !important; max-width:none !important; min-width:0 !important; object-fit:contain !important; display:block !important; flex:none !important; flex-shrink:0 !important; margin:0 !important; z-index:4 !important; pointer-events:none !important; opacity:0 !important; transform:translate(-50%,-50%) !important; transform-origin:50% 50% !important; filter:blur(0.35px) drop-shadow(0 0 8px rgba(255,255,255,0.18)) !important; transition: opacity .16s ease, filter .20s ease !important; } #crypto-gateway-demo-root.pg-tx-complete-hero.is-tx-complete-logo-swapping #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > img.pg-asset-logo{ opacity:0 !important; filter:blur(0.35px) !important; } #crypto-gateway-demo-root.pg-tx-complete-hero.is-tx-complete-logo-swapping #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > img.pg-hero-order-complete-checkmark{ opacity:1 !important; filter:drop-shadow(0 0 8px rgba(255,255,255,0.18)) !important; } } /* SIDE (non-active): hide full name + show the ticker (label-main) as clean text */ #pg-asset-row .pg-asset-pill:not(.pg-asset-active) .pg-asset-label-sub{ display:none !important; } #pg-asset-row .pg-asset-pill:not(.pg-asset-active) .pg-asset-label-main{ display:block !important; margin-top: 2px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 12px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.72) !important; line-height: 1 !important; } /* Coin ring (hybrid option): soft coin circle inside the square */ #pg-asset-row .pg-asset-symbol{ width: 66px !important; height: 66px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius: 999px !important; background: radial-gradient(70% 70% at 30% 25%, rgba(255,255,255,0.20), rgba(255,255,255,0.02) 60%), radial-gradient(120% 120% at 50% 55%, rgba(0,0,0,0.36), rgba(0,0,0,0.55)) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 10px 18px rgba(0,0,0,0.55) !important; position: relative !important; } /* Inner coin ring glow */ #pg-asset-row .pg-asset-symbol::after{ content:""; position:absolute; inset: -2px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 0 12px rgba(var(--accent-rgb),0.10), inset 0 0 10px rgba(0,0,0,0.55); pointer-events:none; opacity: 0.55; } #pg-asset-row .pg-asset-logo{ width: 48px !important; height: 48px !important; object-fit: contain !important; transform: translateZ(0); } /* Greyscale + calm glow for non-selected assets */ #pg-asset-row .pg-asset-pill:not(.pg-asset-active){ filter: saturate(0.72) brightness(0.95); position: relative; top: 34px; /* lowered to sit nearer the featured base */ z-index: 5 !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 0 rgba(255,255,255,0.10), 0 0 18px rgba(255,255,255,0.06) !important;} #pg-asset-row .pg-asset-pill:not(.pg-asset-active) .pg-asset-logo{ filter: grayscale(1) saturate(0) brightness(0.95) contrast(1.05) !important; opacity: 0.92 !important; } /* Selected (hero) asset — SoT-ish square + coin + heavy lighting */ #pg-asset-row .pg-asset-pill.pg-asset-active{ width: 166px !important; height: 166px !important; border-radius: 20px !important; border: 1px solid rgba(var(--coin-rgb, var(--accent-rgb)),0.55) !important; background: radial-gradient(240px 120px at 50% -8%, rgba(var(--coin-rgb, var(--accent-rgb)),0.22), rgba(0,0,0,0) 65%), radial-gradient(260px 180px at 50% 35%, rgba(var(--coin-rgb, var(--accent-rgb)),0.32), rgba(0,0,0,0) 60%), radial-gradient(180px 140px at 35% 30%, rgba(255,255,255,0.24), rgba(255,255,255,0.00) 62%), linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important; box-shadow: 0 22px 44px rgba(0,0,0,0.72), 0 0 58px rgba(var(--coin-rgb, var(--accent-rgb)),0.58), 0 0 0 1px rgba(0,0,0,0.30) inset, inset 0 1px 0 rgba(255,255,255,0.14) !important; opacity: 1 !important; transform: translate3d(0,0,0) scale(1) !important; /* lock featured size */ z-index: 3 !important;} #pg-asset-row .pg-asset-pill.pg-asset-active::before{ content:""; position:absolute; /* extend past tile so the glow can breathe */ inset: -22px -22px -34px !important; border-radius: 30px; pointer-events:none; z-index: -1; /* keep aura BEHIND flanking tiles */ /* Horizon beam system: core line + bloom + depth fade */ background: /* Soft aura body */ radial-gradient(70% 70% at 50% 52%, rgba(var(--coin-rgb, var(--accent-rgb)),0.46), rgba(0,0,0,0) 72%), /* Depth fade downward */ radial-gradient(90% 55% at 50% 98%, rgba(var(--coin-rgb, var(--accent-rgb)),0.28), rgba(0,0,0,0) 70%), /* Core beam (sharp) */ linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(var(--coin-rgb, var(--accent-rgb)),0.95) 50%, rgba(0,0,0,0) 100%); background-repeat: no-repeat; background-size: auto, auto, 74% 2px; /* core beam width/height */ background-position: center, center, 50% calc(100% - 18px); /* sits just under tile base */ opacity: 0.95; filter: blur(10px); } #pg-asset-row .pg-asset-pill.pg-asset-active::after{ content:""; position:absolute; inset: 6px; border-radius: 18px; pointer-events:none; z-index: 4; /* Noticeable but premium light sweep */ background: linear-gradient(115deg, rgba(255,255,255,0.00) 18%, rgba(255,255,255,0.18) 38%, rgba(255,255,255,0.06) 48%, rgba(255,255,255,0.00) 62%); transform: translateX(-22%); opacity: 0.55; filter: blur(0.15px); animation: pgHeroSweep 2.9s cubic-bezier(.2,.9,.2,1) infinite; mix-blend-mode: screen; } @keyframes pgHeroSweep{ 0%{ transform: translateX(-28%); opacity: 0.00; } 18%{ opacity: 0.62; } 52%{ transform: translateX(28%); opacity: 0.55; } 78%{ opacity: 0.08; } 100%{ transform: translateX(28%); opacity: 0.00; } } #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol{ width: 115px !important; height: 115px !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 18px 26px rgba(0,0,0,0.65), 0 0 22px rgba(var(--coin-rgb, var(--accent-rgb)),0.22) !important; } #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol::after{ opacity: 0.95; box-shadow: 0 0 18px rgba(var(--coin-rgb, var(--accent-rgb)),0.20), 0 0 46px rgba(var(--coin-rgb, var(--accent-rgb)),0.14), inset 0 0 12px rgba(0,0,0,0.55); } /* ========================================================= STEP 129 — MOBILE ONLY: FEATURED HORIZON BEAM (NO CLIP) + TOP CROWN Scope: MOBILE ONLY, #pg-asset-row only (NO logic changes) Why: #pg-asset-row uses paint containment, so effects must render INSIDE the active tile. Result: - Horizon beam: crisp colored line at the *inside-bottom edge* + bloom - Crown: soft top halo to make the featured asset feel "lit from above" - No wide external glow / dust / fake reflections ========================================================= */ /* Featured: INTERNAL horizon beam + bloom + crown (kept inside the tile to avoid clipping) */ #pg-asset-row .pg-asset-pill.pg-asset-active{ background: /* Horizon bloom (bottom, internal) */ radial-gradient(150px 36px at 50% 100%, rgba(var(--coin-rgb, var(--accent-rgb)),0.34), rgba(0,0,0,0) 72%), /* Crown halo (top, internal) */ radial-gradient(180px 64px at 50% 0%, rgba(var(--coin-rgb, var(--accent-rgb)),0.20), rgba(0,0,0,0) 70%), /* Existing hero wash */ radial-gradient(260px 180px at 50% 35%, rgba(var(--coin-rgb, var(--accent-rgb)),0.32), rgba(0,0,0,0) 60%), radial-gradient(180px 140px at 35% 30%, rgba(255,255,255,0.24), rgba(255,255,255,0.00) 62%), /* Horizon core beam (2–3px line at the inside-bottom edge) */ linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(var(--coin-rgb, var(--accent-rgb)),0.92) 22%, rgba(var(--coin-rgb, var(--accent-rgb)),0.92) 78%, rgba(0,0,0,0) 100%), /* Base glass */ linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important; background-repeat: no-repeat !important; background-size: 100% 100%, /* bloom */ 100% 100%, /* crown */ 100% 100%, /* hero wash */ 100% 100%, /* spec wash */ 72% 3px, /* beam */ 100% 100% !important; background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 50% 50% !important; /* Keep your hero lift, but avoid the "wide fog" look */ box-shadow: 0 22px 44px rgba(0,0,0,0.72), 0 0 34px rgba(var(--coin-rgb, var(--accent-rgb)),0.24), 0 12px 26px rgba(var(--coin-rgb, var(--accent-rgb)),0.14), 0 0 0 1px rgba(0,0,0,0.30) inset, inset 0 1px 0 rgba(255,255,255,0.14) !important; } #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-logo{ width: 97px !important; height: 97px !important; filter: none !important; opacity: 1 !important; } /* Featured asset short label (BTC / ETH / ZLNC) */ #pg-asset-row .pg-asset-tag{ display:none !important; } #pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-tag{ display:none !important; } /* Snap "sweet spot" micro-pop */ #pg-asset-row .pg-asset-pill.pg-snap-pop{ animation: pgSnapGlow 520ms cubic-bezier(.2,.9,.2,1) both; } @keyframes pgSnapGlow{ 0%{ box-shadow: 0 22px 44px rgba(0,0,0,0.72), 0 0 26px rgba(var(--coin-rgb, var(--accent-rgb)),0.22), 0 0 0 1px rgba(0,0,0,0.30) inset, inset 0 1px 0 rgba(255,255,255,0.14); } 45%{ box-shadow: 0 24px 48px rgba(0,0,0,0.76), 0 0 54px rgba(var(--coin-rgb, var(--accent-rgb)),0.38), 0 0 0 1px rgba(0,0,0,0.30) inset, inset 0 1px 0 rgba(255,255,255,0.16); } 100%{ box-shadow: 0 22px 44px rgba(0,0,0,0.72), 0 0 42px rgba(var(--coin-rgb, var(--accent-rgb)),0.42), 0 0 0 1px rgba(0,0,0,0.30) inset, inset 0 1px 0 rgba(255,255,255,0.14); } } 35%{ transform: translateZ(0) scale(1.035); } 100%{ transform: translateZ(0) scale(1.00); } } /* ========================================================= ASSET DATA TOGGLE (DESKTOP/TABLET) - Keep toggle behavior for MOBILE only - Prevent any "Toggle Asset Details" artifact on desktop/tablet ========================================================= */ @media (min-width: 521px){ #pg-ad-toggle, #pg-crypto-meta .pg-ad-bottom{ display: none !important; } } /* === META (Current Price / Token Amount / Network) === */ /* MOBILE-ONLY: Premium Asset Data Display (pg-crypto-meta) - Two states: CLOSED (compact) + OPEN (expanded) - Keeps ALL existing IDs/bindings (pg-meta-price, pg-meta-amount, pg-crypto-meta-note, pg-meta-method, pg-meta-change, pg-meta-path, pg-meta-logo, pg-meta-ticker) - Visual language matches #pg-rewards-code: glass, stroke, top hairline, bottom drawer + pill + sweep - Pill hue is driven by the active asset via --pg-active-coin-rgb (synced in JS) */ @media (max-width: 520px){ #pg-crypto-meta{ /* sizing */ width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-self: stretch !important; grid-column: 1 / -1 !important; height: 94px !important; /* CLOSED height +20px */ /* CLOSED height (SoT) */ margin: -2px 0 0 !important; padding: 0 0 10px 0 !important; /* +10px breathing room below values before ribbon */ border-radius: 14px !important; position: relative !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; /* font */ font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; /* Neutral charcoal glass (NO brand tint) */ background: radial-gradient(120% 140% at 50% 28%, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 52%, rgba(0,0,0,0.00) 76%), linear-gradient(180deg, rgba(13,18,20,0.92), rgba(6,8,10,0.96)) !important; /* Stroke (same family as Rewards) */ border: 1px solid rgba(235,245,255,0.18) !important; box-shadow: 0 16px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.08) !important; overflow: hidden !important; /* CLOSED layout: 3 columns (labels row + values row) */ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: 18px 30px !important; column-gap: 16px !important; row-gap: 6px !important; align-items: start !important; align-content: start !important; /* keep grid pinned to top (no stretch) */ } /* Active asset-driven hue (synced from active pill) */ #pg-crypto-meta{ --pg-ad-rgb: var(--pg-active-coin-rgb, var(--accent-rgb)); } /* OPEN state (expanded) */ #pg-crypto-meta.is-ad-open{ height: 148px !important; /* OPEN height (SoT) */ grid-template-rows: 0px 48px 58px 28px !important; /* combine label row into value row so header sits higher (matches CLOSED) */ /* add detail rows */ align-content: start !important; /* prevent grid track stretch -> header shift */ } /* === top framing hairline (white-ish) to sharpen the top edge === */ #pg-crypto-meta::before{ content:""; position:absolute; left: 10px; right: 10px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.32) 18%, rgba(255,255,255,0.32) 82%, rgba(255,255,255,0.00) 100%); opacity: 0.9; pointer-events:none; z-index: 3; } /* === top glow (asset-hued) === */ #pg-crypto-meta::after{ content:""; position:absolute; left:50%; top:-2px; transform: translateX(-50%); width: 78%; height: 12px; pointer-events:none; background: radial-gradient(260px 16px at 50% 0%, rgba(var(--pg-ad-rgb),0.44), rgba(var(--pg-ad-rgb),0.16) 44%, rgba(255,255,255,0.06) 60%, rgba(0,0,0,0.00) 80%); opacity: 0.95; filter: blur(0.2px); z-index: 2; } /* Subtle internal dividers (clean, premium) */ #pg-crypto-meta{ background-image: /* vertical seams between 3 cols */ linear-gradient(180deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.00) 100%), linear-gradient(180deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.00) 100%), /* label/value divider */ linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.00) 100%), /* bottom neutral bar */ linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.00) 100%), /* base glass gradients (kept from above) */ radial-gradient(120% 140% at 50% 28%, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 52%, rgba(0,0,0,0.00) 76%), linear-gradient(180deg, rgba(13,18,20,0.92), rgba(6,8,10,0.96)); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-size: 1px 64%, /* seam 1 */ 1px 64%, /* seam 2 */ 88% 1px, /* row divider */ 78% 2px, /* bottom bar */ auto, auto; background-position: 33.333% 58%, /* seam 1 */ 66.666% 58%, /* seam 2 */ 50% 34px, /* label/value divider */ 50% 98%, /* bottom bar */ center, center; } /* Flatten legacy meta item cards */ #pg-crypto-meta .pg-crypto-meta-item{ background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; display: contents !important; /* lets children place in grid */ } /* Labels (row 1) */ #pg-crypto-meta .pg-crypto-meta-label{ display:block !important; grid-row: 1 / 2; align-self: center; font-size: 12px !important; font-weight: 450 !important; text-transform: uppercase !important; letter-spacing: 0.10em !important; color: rgba(255,255,255,0.72) !important; opacity: 0.95 !important; margin: 0 !important; line-height: 1 !important; white-space: nowrap !important; } /* Place each label by DOM order (1..3) */ #pg-crypto-meta .pg-crypto-meta-item:nth-child(1) .pg-crypto-meta-label{ grid-column: 1 / 2; } #pg-crypto-meta .pg-crypto-meta-item:nth-child(2) .pg-crypto-meta-label{ grid-column: 2 / 3; text-align:center; } #pg-crypto-meta .pg-crypto-meta-item:nth-child(3) .pg-crypto-meta-label{ grid-column: 3 / 4; text-align:right; position:relative; left:-54px; top:5px; } /* Values (row 2) */ #pg-crypto-meta #pg-meta-price{ grid-column: 1 / 2; grid-row: 2 / 3; align-self: start; justify-self: start; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0.02em !important; color: rgba(255,255,255,0.98) !important; line-height: 1.1 !important; } /* Remove percent from CLOSED value row (it lives in OPEN detail section) */ #pg-crypto-meta #pg-meta-change{ display:none !important; } #pg-crypto-meta #pg-meta-amount{ display:block !important; grid-column: 2 / 3; grid-row: 2 / 3; align-self: start; justify-self: center; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0.02em !important; color: rgba(255,255,255,0.98) !important; line-height: 1.1 !important; white-space: nowrap !important; } #pg-crypto-meta #pg-crypto-meta-note{ grid-column: 3 / 4; grid-row: 2 / 3; align-self: start; margin-top: 0 !important; justify-self: end; font-weight: 700 !important; font-size: 15px !important; color: rgba(255,255,255,0.98) !important; line-height: 1.1 !important; white-space: nowrap !important; } #pg-crypto-meta #pg-crypto-meta-note .pg-meta-total-label{ display:none !important; } /* SoT: no 'Total' label in closed row */ #pg-crypto-meta #pg-crypto-meta-note .pg-meta-total-amount{ font-weight: 675 !important; font-size: 14px !important; letter-spacing: 0.02em !important; } #pg-crypto-meta #pg-crypto-meta-note .pg-meta-total-usd{ font-weight: 400 !important; font-size: 12px !important; opacity: 0.86 !important; margin-left: 6px !important; letter-spacing: 0.10em !important; } /* Hide legacy “Price Lock 90s” note always */ #pg-crypto-meta .pg-crypto-meta-item:nth-child(1) .pg-crypto-meta-note{ display:none !important; } /* Hide network + path in CLOSED (they are OPEN-only details) */ #pg-crypto-meta #pg-meta-method{ display:none !important; } #pg-crypto-meta #pg-meta-path{ display:none !important; } #pg-crypto-meta .pg-meta-assethead{ display:none !important; } /* === OPEN details layout (matches SoT opened render) === */ #pg-crypto-meta.is-ad-open #pg-meta-change{ display:flex !important; } #pg-crypto-meta.is-ad-open #pg-meta-method{ display:block !important; } #pg-crypto-meta.is-ad-open #pg-meta-path{ display:inline !important; } #pg-crypto-meta.is-ad-open .pg-meta-assethead{ display:flex !important; } /* detail header (logo + ticker + network) */ #pg-crypto-meta .pg-meta-assethead{ grid-column: 1 / 4; grid-row: 3 / 4; align-self: start; justify-self: start; display:flex; align-items:center; gap: 10px; min-width: 0; padding-top: 2px; z-index: 5; } #pg-crypto-meta .pg-meta-coin{ width: 28px; height: 28px; border-radius: 999px; overflow:hidden; background: rgba(255,255,255,0.06); box-shadow: 0 10px 18px rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; flex: 0 0 auto; } #pg-crypto-meta .pg-meta-logo{ width: 28px; height: 28px; object-fit: cover; display:block; } #pg-crypto-meta .pg-meta-ticker{ font-weight: 675 !important; font-size: 16px !important; letter-spacing: 0.10em !important; color: rgba(255,255,255,0.98) !important; line-height: 1 !important; white-space: nowrap !important; } /* network text sits to the right of ticker, like the SoT */ #pg-crypto-meta #pg-meta-method{ margin-left: 10px !important; font-weight: 700 !important; font-size: 13px !important; color: rgba(255,255,255,0.86) !important; letter-spacing: 0.02em !important; white-space: nowrap !important; } #pg-crypto-meta #pg-meta-method .pg-meta-sub{ font-weight: 400 !important; font-size: 12px !important; opacity: 0.86 !important; margin-left: 6px !important; } /* percent change row (left, under header) */ #pg-crypto-meta #pg-meta-change{ grid-column: 1 / 4; grid-row: 3 / 4; align-self: end; justify-self: start; margin-top: 30px !important; font-weight: 800 !important; font-size: 14px !important; color: rgba(255,255,255,0.92) !important; /* percent stays white */ display:flex; align-items:center; gap: 6px; white-space: nowrap; } /* Keep triangles colored, percent white */ #pg-crypto-meta #pg-meta-change.pg-up::before{ content:""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #22c55e; display:inline-block; transform: translateY(1px); margin-right: 6px; } #pg-crypto-meta #pg-meta-change.pg-down::before{ content:""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #ef4444; display:inline-block; transform: translateY(1px); margin-right: 6px; } /* path row (centered) */ #pg-crypto-meta .pg-crypto-meta-item:nth-child(3) .pg-crypto-meta-note{ grid-column: 1 / 4; grid-row: 4 / 5; align-self: center; justify-self: center; text-align:center; font-weight: 400 !important; font-size: 12px !important; color: rgba(255,255,255,0.74) !important; letter-spacing: 0.04em !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; padding: 0 10px !important; } /* Bottom drawer ribbon + toggle (matches Rewards language) */ #pg-crypto-meta .pg-ad-bottom{ position:absolute; left:0; right:0; bottom:-30px; height:34px; border-radius: 0 0 18px 18px; pointer-events:auto; z-index: 6; overflow:hidden; background: transparent; } #pg-crypto-meta .pg-ad-bottom::before{ content:""; position:absolute; inset:0; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 18%, rgba(0,0,0,0.22) 58%, rgba(0,0,0,0.46) 100%), /* Divider line at top of ribbon (crisp hairline) */ linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.22) 18%, rgba(255,255,255,0.22) 82%, rgba(255,255,255,0.00) 100%) 0 0/100% 1px no-repeat, /* slight inner lift */ radial-gradient(120px 26px at 50% 10%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 70%); opacity: 0.95; pointer-events:none; } #pg-crypto-meta .pg-ad-toggle{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background: transparent; cursor:pointer; z-index: 7; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #pg-crypto-meta .pg-ad-sr{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; } #pg-crypto-meta .pg-ad-pill{ position:absolute; left:50%; bottom:-10px; transform: translateX(-50%); width: 32px; height: 8px; border-radius: 999px; /* Dynamic asset hue */ background: linear-gradient(90deg, rgba(var(--pg-ad-rgb),0.18), rgba(var(--pg-ad-rgb),0.92), rgba(var(--pg-ad-rgb),0.18)); box-shadow: 0 0 0 1px rgba(var(--pg-ad-rgb),0.32) inset, 0 0 18px rgba(var(--pg-ad-rgb),0.35), 0 12px 24px rgba(0,0,0,0.58); opacity: 0.90; pointer-events:none; transition: background 260ms ease, box-shadow 260ms ease, filter 260ms ease; animation: pgAdPillPulse 2.8s ease-in-out infinite; } #pg-crypto-meta .pg-ad-pill::after{ content:""; position:absolute; inset:-60% -80%; background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.24), rgba(255,255,255,0.00)); transform: translateX(-35%); animation: pgAdPillSheen 3.6s ease-in-out infinite; opacity: 0.9; } @keyframes pgAdPillPulse{ 0%,100%{ transform: translateX(-50%) scaleX(1); opacity:0.68; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 50%{ transform: translateX(-50%) scaleX(1.06); opacity:0.86; filter: drop-shadow(0 0 10px rgba(255,255,255,0.10)); } } @keyframes pgAdPillSheen{ 0%{ transform: translateX(-45%); opacity:0.0; } 18%{ opacity:0.0; } 50%{ opacity:0.9; } 82%{ opacity:0.0; } 100%{ transform: translateX(45%); opacity:0.0; } } } @media (max-width: 520px){ /* === HYBRID BUTTON (visual only for now) === */ #pg-crypto-section{ display: block !important; width: 95% !important; margin: 12px auto 0 !important; padding: 10px 15px 0 !important; } #pg-crypto-section > .pg-hybrid-row{ display: flex !important; gap: 6px !important; /* tighter spacing to match SoT */ align-items: center !important; } .pg-hybrid-btn{ flex: 1 1 0 !important; height: 52px !important; border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.06) !important; color: #e9f4f7 !important; font-weight: 700 !important; letter-spacing: 0.01em !important; box-shadow: 0 14px 26px rgba(0,0,0,0.55), 0 0 18px rgba(var(--accent-rgb),0.18) !important; transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, filter 220ms ease !important; } .pg-hybrid-btn:active{ transform: translateY(1px) scale(0.99) !important; filter: brightness(1.10) !important; } .pg-hybrid-btn-card{ opacity: 0.78 !important; /* secondary */ } .pg-hybrid-btn-crypto{ position: relative !important; isolation: isolate !important; border-color: rgba(var(--accent-rgb),0.42) !important; background: rgba(var(--accent-rgb),0.10) !important; box-shadow: 0 14px 26px rgba(0,0,0,0.55), 0 0 22px rgba(var(--accent-rgb),0.22) !important; } /* Optional: subtle "orbit" highlight that travels around the outline (mobile has no hover) */ .pg-hybrid-btn-crypto::before{ content:""; position:absolute; inset:-1px; /* let the glow breathe */ border-radius: inherit; padding: 1px; /* stroke thickness */ pointer-events:none; z-index: 2; /* A single moving highlight (accent + a white spec pop) */ background: conic-gradient( from 0deg, rgba(var(--accent-rgb),0.00) 0deg, rgba(var(--accent-rgb),0.00) 260deg, rgba(var(--accent-rgb),0.85) 318deg, rgba(255,255,255,0.75) 336deg, rgba(var(--accent-rgb),0.20) 348deg, rgba(var(--accent-rgb),0.00) 360deg ); /* Keep ONLY the border ring visible */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.88; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.22)) drop-shadow(0 0 18px rgba(var(--accent-rgb),0.14)); animation: pgHybridOrbitStroke 7.5s linear infinite; } /* Hide legacy crypto buttons row (we keep it for JS hooks) */ #pg-crypto-section .pg-legacy-crypto-actions{ display: none !important; } @keyframes pgHybridOrbitStroke{ to{ transform: rotate(360deg); } } } @media (max-width: 520px){ /* ========================================================= STEP 133B — AUTHORITATIVE ACTIVE OUTER GLOW (INSIDE STYLE, MOBILE ONLY) Scope: ONLY #pg-asset-row .pg-asset-pill.pg-asset-active Notes: Placed here to win cascade against earlier duplicates. ========================================================= */ #pg-asset-row .pg-asset-pill.pg-asset-active{ /* Stronger OUTER aura (very noticeable) */ box-shadow: 0 26px 52px rgba(0,0,0,0.80), 0 0 64px rgba(var(--coin-rgb, var(--accent-rgb)),0.46), 0 0 128px rgba(var(--coin-rgb, var(--accent-rgb)),0.26), 0 0 0 1px rgba(0,0,0,0.30) inset, inset 0 1px 0 rgba(255,255,255,0.18) !important; } } /* ========================================================= STEP 190 — MOBILE ONLY: ASSET DATA (CLOSED) 3-COLUMN TYPO + FULL WIDTH + PILL/SWEEP Scope: ONLY #pg-crypto-meta (pg-crypto-meta) on mobile (<=520px) Goal: - Closed view matches SoT: 3 columns (CURRENT PRICE / TOKEN AMOUNT / TOTAL) - Labels: Segoe UI 15px - Values: Segoe UI 22px bold - Container width: 100% - Bottom drawer pill + light sweep visible (match pg-rewards-code language) ========================================================= */ @media (max-width: 520px){ /* Hard authority on width + alignment */ #pg-crypto-meta{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure the bottom drawer (pill) can render (SoT shows it) */ #pg-crypto-meta{ overflow: visible !important; /* allow drawer to show */ padding-bottom: 28px !important; /* reserve space for drawer */ } /* Closed state: make the base layout a clean 3-col grid (labels row + values row) */ #pg-crypto-meta{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: 22px 34px !important; /* room for 15px labels + 22px values */ column-gap: 18px !important; row-gap: 4px !important; align-items: start !important; align-content: start !important; /* keep grid pinned to top (no stretch) */ } /* Remove any legacy "tile" styling inside the meta items (we want pure text) */ #pg-crypto-meta .pg-crypto-meta-item{ background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; } /* --- Column 1: CURRENT PRICE --- */ #pg-crypto-meta .pg-crypto-meta-item:nth-child(1) .pg-crypto-meta-label{ grid-column: 1 / 2; grid-row: 1 / 2; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.78) !important; margin: 0 !important; white-space: nowrap !important; } #pg-crypto-meta .pg-crypto-meta-item:nth-child(1) .pg-crypto-meta-value{ grid-column: 1 / 2; grid-row: 2 / 3; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: 0.01em !important; color: rgba(255,255,255,0.98) !important; margin: 0 !important; white-space: nowrap !important; } /* Hide price-lock note + change in CLOSED */ #pg-crypto-meta .pg-crypto-meta-item:nth-child(1) .pg-crypto-meta-note{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) #pg-meta-change{ display:none !important; } /* --- Column 2: TOKEN AMOUNT --- */ #pg-crypto-meta .pg-crypto-meta-item:nth-child(2) .pg-crypto-meta-label{ grid-column: 2 / 3; grid-row: 1 / 2; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.78) !important; margin: 0 !important; white-space: nowrap !important; } #pg-crypto-meta .pg-crypto-meta-item:nth-child(2) #pg-meta-amount{ grid-column: 2 / 3; grid-row: 2 / 3; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; color: rgba(255,255,255,0.98) !important; margin: 0 !important; white-space: nowrap !important; } /* --- Column 3: TOTAL --- */ #pg-crypto-meta #pg-crypto-meta-note{ grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; align-self: start !important; justify-self: end !important; font-weight: 700 !important; font-size: 15px !important; color: rgba(255,255,255,0.98) !important; line-height: 1.05 !important; white-space: nowrap !important; position: relative !important; } /* Put the TOTAL label above the amount (SoT header row) */ #pg-crypto-meta #pg-crypto-meta-note::before{ content: "TOTAL"; position: absolute; right: 0; top: -22px; /* aligns with label row */ font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.78) !important; white-space: nowrap !important; pointer-events: none; } #pg-crypto-meta #pg-crypto-meta-note .pg-meta-total-label{ display:none !important; } /* SoT header is separate */ #pg-crypto-meta #pg-crypto-meta-note .pg-meta-total-amount{ font-weight: 700 !important; font-size: 15px !important; } #pg-crypto-meta #pg-crypto-meta-note .pg-meta-total-usd{ font-weight: 400 !important; font-size: 11px !important; opacity: 0.86 !important; margin-left: 6px !important; letter-spacing: 0.10em !important; } /* Hide network + path in CLOSED (OPEN-only) */ #pg-crypto-meta:not(.is-ad-open) #pg-meta-method{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) #pg-meta-path{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) .pg-meta-assethead{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item:nth-child(3){ display:none !important; } /* OPEN state: restore the 3rd item and details (existing rules still apply) */ #pg-crypto-meta.is-ad-open .pg-crypto-meta-item:nth-child(3){ display:block !important; } /* Bottom drawer / pill: ensure it is visible and aligned (matches rewards language) */ #pg-crypto-meta .pg-ad-bottom{ position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; /* visible inside the card */ height: 34px !important; border-radius: 0 0 18px 18px !important; pointer-events: auto !important; z-index: 6 !important; overflow: hidden !important; background: transparent !important; } /* If any earlier rule pushed it outside, override */ #pg-crypto-meta .pg-ad-toggle{ position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 34px !important; border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } } /* ========================================================= STEP 191 — MOBILE ONLY: ASSET DATA CLOSED VIEW (SoT TYPO + TRUE 3-COL) Fixes: - CLOSED state shows ONLY: Current Price / Token Amount / Total (Payment Network hidden) - Labels: Segoe UI 15px (uppercase) - Values: Segoe UI 22px bold - Ensure columns do not collapse/overlap - Make pill + sweep visible in CLOSED by keeping ribbon INSIDE container (no overflow clip) Scope: ONLY #pg-crypto-meta on mobile (<=520px) ========================================================= */ @media (max-width: 520px){ /* ---- CLOSED STATE ONLY ---- */ #pg-crypto-meta:not(.is-ad-open){ /* lock SoT height and reserve space for the bottom ribbon */ height: 112px !important; padding: 14px 14px 40px !important; /* bottom space for ribbon/pill */ overflow: hidden !important; /* keep glass clean; ribbon is now inside */ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: 18px 30px !important; column-gap: 16px !important; row-gap: 6px !important; align-items: start !important; align-content: start !important; /* keep grid pinned to top (no stretch) */ } /* Hide the 3rd meta tile (Payment Network) in CLOSED */ #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item:nth-child(3){ display:none !important; } /* neutralize any tile padding that could push text off-grid */ #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item{ background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; } /* ----- LABELS (row 1) ----- */ #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item:nth-child(1) .pg-crypto-meta-label{ grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 11px !important; font-weight: 300 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.78) !important; margin: 0 !important; white-space: nowrap !important; } #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item:nth-child(2) .pg-crypto-meta-label{ grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; justify-self: center !important; text-align: center !important; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 11px !important; font-weight: 300 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.78) !important; margin: 0 !important; white-space: nowrap !important; } /* TOTAL label comes from the note block */ #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note .pg-meta-total-label{ display:block !important; grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; justify-self: end !important; text-align: right !important; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 11px !important; font-weight: 300 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.78) !important; margin: 0 !important; white-space: nowrap !important; } /* ----- VALUES (row 2) ----- */ #pg-crypto-meta:not(.is-ad-open) #pg-meta-price{ grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; justify-self: start !important; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; color: rgba(255,255,255,0.98) !important; line-height: 1.05 !important; white-space: nowrap !important; } /* In CLOSED: hide percent change next to price */ #pg-crypto-meta:not(.is-ad-open) #pg-meta-change{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) #pg-meta-amount{ grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; justify-self: center !important; text-align: center !important; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 11px !important; font-weight: 300 !important; letter-spacing: 0.01em !important; color: rgba(255,255,255,0.98) !important; line-height: 1.05 !important; white-space: nowrap !important; } /* Place the TOTAL value block in col 3 row 2 */ #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note{ grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; justify-self: end !important; align-self: start !important; text-align: right !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; white-space: nowrap !important; } #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note .pg-meta-total-amount{ font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 15px !important; font-weight: 100 !important; letter-spacing: 0.01em !important; color: rgba(255,255,255,0.98) !important; line-height: 1.05 !important; } #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note .pg-meta-total-usd{ font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; opacity: 0.86 !important; margin-left: 6px !important; letter-spacing: 0.10em !important; } /* Hide legacy "Price Lock 90s" note entirely (SoT closed doesn't show it) */ #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item:nth-child(1) .pg-crypto-meta-note{ display:none !important; } /* Hide network/path in CLOSED (open-only details) */ #pg-crypto-meta:not(.is-ad-open) #pg-meta-method{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) #pg-meta-path{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) .pg-meta-assethead{ display:none !important; } /* ----- Bottom ribbon + pill (INSIDE container so it can't be clipped) ----- */ #pg-crypto-meta .pg-ad-bottom{ left:0 !important; right:0 !important; bottom:0 !important; /* was negative */ height:24px !important; border-radius: 0 0 18px 18px !important; } #pg-crypto-meta .pg-ad-pill{ bottom:6px !important; /* was negative */ width: 36px !important; height: 8px !important; } } /* ========================================================= STEP-200 UPDATE (MOBILE ONLY) — TRUE FULL-WIDTH ASSET DATA Goal: Make #pg-crypto-meta match the full-bleed width behavior of the Rewards container, WITHOUT altering any open/close logic or lighting system. Root cause: parent card (.pg-card.pg-main-card) has 12px side padding, so children max out at (100% - 24px). We cancel that here. Changes: width full-bleed + left/right negative margins only. ========================================================= */ @media (max-width: 520px){ /* Full-bleed inside the main card (cancels 12px L/R padding on .pg-main-card) */ #pg-crypto-meta{ width: calc(100% + 24px) !important; max-width: calc(100% + 24px) !important; margin-left: -12px !important; margin-right: -12px !important; justify-self: stretch !important; box-sizing: border-box !important; } } /* ========================================================= STEP 203 — MOBILE ONLY: ASSET DATA (CLOSED STATE) SoT MATCH Goal (CLOSED only): show exactly 3 columns: CURRENT PRICE | TOKEN AMOUNT | TOTAL Typography spec (per AJ): - Labels: 12px / 400 / letter-spacing 0.1em (uppercase) - Values: 14px / 675 / letter-spacing 0.1em Notes: - Keep existing container + open/close logic intact. - We only normalize CLOSED layout + typography. ========================================================= */ @media (max-width: 520px){ /* Ensure the meta card itself is full-bleed like Rewards (mobile only) */ #pg-crypto-meta{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ---- CLOSED STATE ONLY ---- */ #pg-crypto-meta:not(.is-ad-open){ /* keep your finalized glass/container — only layout/spacing */ height: 84px !important; padding: 14px 14px 26px !important; /* keep bottom space for pill/sweep */ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: auto auto !important; column-gap: 18px !important; row-gap: 6px !important; align-items: start !important; align-content: start !important; /* keep grid pinned to top (no stretch) */ } /* In CLOSED, make each meta-item “transparent” to the parent grid so its children can be placed in the 3-col grid */ #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item{ display: contents !important; } /* Hide OPEN-only / extra content in CLOSED */ #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item:nth-child(3){ display:none !important; } /* Payment Network tile */ #pg-crypto-meta:not(.is-ad-open) .pg-meta-assethead{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) #pg-meta-method{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) #pg-meta-path{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) #pg-meta-change{ display:none !important; } #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item:nth-child(1) .pg-crypto-meta-note{ display:none !important; } /* “Price Lock 90s” */ /* ---- LABELS (Row 1) ---- */ #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item:nth-child(1) .pg-crypto-meta-label{ grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; justify-self: start !important; text-align: left !important; } #pg-crypto-meta:not(.is-ad-open) .pg-crypto-meta-item:nth-child(2) .pg-crypto-meta-label{ grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; justify-self: center !important; text-align: center !important; } /* TOTAL label is generated above the amount (keeps DOM clean) */ #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note{ grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; justify-self: end !important; text-align: right !important; position: relative !important; } #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note::before{ content: none !important; display: none !important; } /* TOTAL label — use the real DOM node (avoids pseudo spacing weirdness) */ #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note .pg-meta-total-label{ display: block !important; position: absolute !important; right: 0 !important; top: -20px !important; /* aligns with row-1 labels */ font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.78) !important; line-height: 1.1 !important; white-space: nowrap !important; pointer-events: none !important; } /* ---- VALUES (Row 2) ---- */ #pg-crypto-meta:not(.is-ad-open) #pg-meta-price{ grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; justify-self: start !important; text-align: left !important; } #pg-crypto-meta:not(.is-ad-open) #pg-meta-amount{ grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; justify-self: center !important; text-align: center !important; white-space: nowrap !important; } /* Shared value typography */ #pg-crypto-meta:not(.is-ad-open) #pg-meta-price, #pg-crypto-meta:not(.is-ad-open) #pg-meta-amount, #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note .pg-meta-total-amount{ font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 14px !important; font-weight: 675 !important; letter-spacing: 0.1em !important; color: rgba(255,255,255,0.96) !important; margin: 0 !important; line-height: 1.15 !important; } /* TOTAL amount + USD styling */ #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note .pg-meta-total-label{ display: block !important; } /* SoT: no “Total” label inline */ #pg-crypto-meta:not(.is-ad-open) #pg-crypto-meta-note .pg-meta-total-usd{ font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.1em !important; opacity: 0.86 !important; margin-left: 6px !important; white-space: nowrap !important; } } /* ========================================================= STEP-204 PATCH (MOBILE ONLY) — RESTORE TRUE FULL-WIDTH Reason: ensure #pg-crypto-meta remains full-bleed even if later rules reintroduce constrained widths. Scope: width only (no layout/typography changes). ========================================================= */ @media (max-width: 520px){ #pg-crypto-meta{ width: calc(100% + 24px) !important; max-width: calc(100% + 24px) !important; margin-left: -12px !important; margin-right: -12px !important; justify-self: stretch !important; box-sizing: border-box !important; } } /* ============================================================= STEP-219 — OPEN STATE: REMOVE DUPLICATE HEADER + MIRROR CLOSED (ROBUST) Scope: MOBILE ONLY (<=520px) Why: - OPEN state was still rendering / positioning a second header (labels + values) because nth-child targeting is unreliable when #pg-crypto-meta has extra children. Approach: - In OPEN state, hide ALL .pg-crypto-meta-label nodes. - Recreate the 3 header labels via ::before on the 3 value nodes, identical to CLOSED. - Place the 3 value nodes directly into the parent grid rows 1-2. - Keep details strictly below header (rows 3-4) with zero header shift. Touches: #pg-crypto-meta.is-ad-open only. ============================================================= */ @media (max-width: 520px){ /* OPEN container grid: header rows + detail rows */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open{ display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; grid-template-rows: 18px 30px 40px 22px !important; /* label, value, detail, detail */ column-gap: 16px !important; row-gap: 6px !important; align-items: start !important; align-content: start !important; /* keep grid pinned to top (no stretch) */ } /* Make .pg-crypto-meta-item transparent to grid so we can position inner nodes by id */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open .pg-crypto-meta-item{ display: contents !important; } /* 1) Nuke ALL built-in labels in OPEN (prevents any duplicate header / 'NETWORK' etc) */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open .pg-crypto-meta-label{ display:none !important; } /* 2) HEADER VALUES — lock positions (same as CLOSED) */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-price{ grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; justify-self: start !important; text-align: left !important; margin: 0 !important; white-space: nowrap !important; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-amount{ grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; justify-self: center !important; text-align: center !important; margin: 0 !important; white-space: nowrap !important; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-crypto-meta-note{ grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; justify-self: end !important; text-align: right !important; margin: 0 !important; white-space: nowrap !important; position: relative !important; /* for TOTAL ::before */ } /* Kill legacy note blocks that should never appear in the SoT header */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open .pg-crypto-meta-note{ display:none !important; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-change{ display:none !important; } /* Ensure any inline TOTAL label inside the note is off (we render TOTAL via ::before) */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-crypto-meta-note .pg-meta-total-label{ display:none !important; } /* 3) HEADER LABELS via ::before (Row 1) — matches CLOSED typography */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-price, #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-amount, #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-crypto-meta-note{ padding-top: 18px !important; /* creates space for the label row */ top: -23px !important; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-price::before, #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-amount::before, #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-crypto-meta-note::before{ position: absolute; top: 0; left: 0; right: auto; content: ""; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important; font-size: 11px !important; font-weight: 300 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.78) !important; white-space: nowrap !important; pointer-events: none; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-price{ position: relative !important; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-amount{ position: relative !important; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-price::before{ content:"PRICE"; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-amount::before{ content:"TOKEN AMOUNT"; left:50%; transform: translateX(-50%); } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-crypto-meta-note::before{ content:"TOTAL"; right:0; left:auto; } /* 4) DETAILS — positioned below header (match Finalized Open design) */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open .pg-meta-assethead{ grid-column: 1 / 2 !important; grid-row: 3 / 5 !important; display:flex !important; align-items:center !important; gap: 10px !important; justify-self: start !important; align-self: start !important; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-method{ grid-column: 2 / 3 !important; grid-row: 3 / 4 !important; justify-self: center !important; align-self: center !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; position: relative !important; top: -14px !important; max-width: 100% !important; } #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-path{ grid-column: 2 / 3 !important; grid-row: 4 / 5 !important; justify-self: center !important; align-self: center !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; position: relative !important; top: -8px !important; } /* ============================================================= STEP-241 — MICRO ADJUSTMENTS (MOBILE OPEN STATE ONLY) Goal: Match CLOSED header vertical placement 1:1 - Move BTC mainnet (#pg-meta-method) up 2px - Move path line (#pg-meta-path) up 20px and left 5px - Prevent clipping while nudging position - Restore / pin % change (#pg-meta-change) under assethead ============================================================= */ /* Network line (e.g., BTC mainnet) — FINAL: align with BTC ticker row */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-method{ position: relative !important; top: -15px !important; } /* Path line (e.g., BTC - Stablecoin - FIAT - Instantly) — FINAL placement */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-path{ position: relative !important; top: -25px !important; /* move UP 15px */ left: -10px !important; /* move LEFT 5px */ overflow: visible !important; text-overflow: clip !important; } /* The note wrapper that contains #pg-meta-path can clip; force visible */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open .pg-crypto-meta-note{ overflow: visible !important; } /* % change under assethead (left column detail) */ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open #pg-meta-change{ display: inline-flex !important; align-items: center !important; gap: 6px !important; grid-column: 1 / 2 !important; grid-row: 3 / 4 !important; justify-self: start !important; align-self: start !important; margin-top: 17px !important; /* move DOWN 15px */ opacity: 1 !important; } } /* ============================================================= STEP-224 PATCH — OPEN STATE: Restore TOTAL + Lock Header (Mobile Only) Goal: - In OPEN (.is-ad-open), the top header (PRICE / TOKEN AMOUNT / TOTAL) must be identical to CLOSED with zero shift. - Move "Payment Network" / path content into the detail rows (no overlap with header). - Ensure TOTAL label + value are visible in OPEN (right column). Touches: #pg-crypto-meta (mobile <=520px) only ============================================================= */ @media (max-width: 520px){ /* 0) Header always wins: keep TOTAL note in the top-right value cell */ #pg-crypto-meta.is-ad-open #pg-crypto-meta-note{ display:block !important; grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; align-self: start !important; justify-self: end !important; z-index: 6 !important; } /* Keep the TOTAL label (pseudo) in the top label row */ #pg-crypto-meta.is-ad-open #pg-crypto-meta-note::before{ top: 0px !important; /* identical to closed header alignment */ z-index: 6 !important; } /* 1) Prevent the 3rd meta item's label/value from colliding with header */ #pg-crypto-meta.is-ad-open .pg-crypto-meta-item:nth-child(3) .pg-crypto-meta-label{ display:none !important; /* hides "Payment Network" label */ } /* 2) Reposition OPEN detail content into rows 3-4 (matches SoT opened design) */ /* Logo + ticker block (left column, row 3) */ #pg-crypto-meta.is-ad-open .pg-meta-assethead{ display:flex !important; grid-column: 1 / 2 !important; grid-row: 3 / 4 !important; align-self: center !important; justify-self: start !important; margin-top: -10px; padding-top: 0 !important; z-index: 6 !important; } /* % change (left column, row 4) */ #pg-crypto-meta.is-ad-open #pg-meta-change{ display:flex !important; grid-column: 1 / 2 !important; grid-row: 4 / 5 !important; align-self: start !important; justify-self: start !important; margin: 4px 0 0 0 !important; /* no push into header */ z-index: 6 !important; } /* Network method (middle column, row 3) */ #pg-crypto-meta.is-ad-open #pg-meta-method{ display:block !important; grid-column: 2 / 3 !important; grid-row: 3 / 4 !important; align-self: center !important; justify-self: start !important; margin: 0 !important; z-index: 6 !important; } /* Path text (middle column, row 4) */ #pg-crypto-meta.is-ad-open .pg-crypto-meta-item:nth-child(3) .pg-crypto-meta-note{ display:block !important; grid-column: 2 / 4 !important; grid-row: 4 / 5 !important; align-self: start !important; justify-self: start !important; margin: 4px 0 0 0 !important; z-index: 6 !important; } #pg-crypto-meta.is-ad-open #pg-meta-path{ display:inline !important; white-space: nowrap !important; } /* 3) Disable any legacy rule that "restores" item 3 as a header column */ #pg-crypto-meta.is-ad-open .pg-crypto-meta-item:nth-child(3){ /* stays flattened via display:contents from base rules; nothing to do here */ } } /* ============================================================= STEP-236 — OPEN STATE: MATCH CLOSED HEADER PADDING (NO SHIFT) Scope: MOBILE ONLY (<=520px) Fix: - OPEN state was inheriting padding: 0 (computed top/left/right 0px) - CLOSED state uses padding: 14px 14px ... (header alignment) - We set OPEN to the same left/right/top padding so PRICE/TOKEN/TOTAL sit 1:1 between CLOSED and OPEN. ============================================================= */ @media (max-width: 520px){ #pg-crypto-meta.pg-crypto-meta.pg-ad-card.is-ad-open{ padding-top: 10px !important; padding-left: 14px !important; padding-right: 14px !important; /* keep the OPEN bottom breathing room consistent with the open layout */ padding-bottom: 28px !important; align-content: start !important; /* keep grid pinned to top (no stretch) */ box-sizing: border-box !important; } } /* POPUP GAP FIX: ensure Duda wrappers do not force fixed height (CSS fallback) */ html.zelen-gateway-embed #dmFirstContainer, html.zelen-gateway-embed #dmStyle_innerContainer, html.zelen-gateway-embed #dmStyle_outerContainer, html.zelen-gateway-embed .dmLayoutWrapper, html.zelen-gateway-embed .site_content, html.zelen-gateway-embed .dmInner, html.zelen-gateway-embed .dmOuter, html.zelen-gateway-embed .dmRespRow, html.zelen-gateway-embed .dmRespColsWrapper, html.zelen-gateway-embed .dmRespCol, html.zelen-gateway-embed .dmCustomHtml{ height: auto !important; min-height: 0 !important; max-height: none !important; } /* Desktop/Tablet safety: never show Apply Rewards body markup */ /* ========================================================= APPLY REWARDS — BLACK OVERLAY (MOBILE ONLY) Trigger: #pg-ar-switch (ON) • Micro-delay before showing Bounds: top of #pg-rewards-code → top of #pg-hybredpayment-hero ========================================================= */ @media (max-width: 520px){ #pg-ar-overlay{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; pointer-events: auto; background: rgba(0,0,0,0.78); /* strong dark glass like SoT */ backdrop-filter: blur(10px) saturate(0.90); -webkit-backdrop-filter: blur(10px) saturate(0.90); z-index: 10000; border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(var(--accent-rgb),0.10); overflow: hidden; } /* ===== Apply Rewards overlay CONTENT (mobile-only) ===== */ #pg-ar-overlay{ --pg-ar-rewards-h: 74px; /* JS updates to match #pg-rewards-code height */ /* ===== CONTROL POINTS (Apply Rewards keypad + amount) ===== */ --pg-ar-content-shift-y: -40px; /* move amount+keypad DOWN (Y) */ --pg-ar-content-shift-x: 0px; /* move amount+keypad LEFT/RIGHT (X) */ --pg-ar-enter-shift-x: 100px; /* move $ amount LEFT/RIGHT without moving keypad */ --pg-ar-enter-shift-y: 8px; /* move $ amount DOWN/UP without moving keypad */ --pg-ar-enter-font-size: 35px; /* $ amount size */ --pg-ar-enter-font-weight: 450; /* $ amount weight */ } #pg-ar-overlay .pg-ar-inner{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: calc(var(--pg-ar-rewards-h) + 18px) 16px 16px; gap: 18px; } /* Content wrapper that actually moves (so control points always work) */ #pg-ar-overlay .pg-ar-stack{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; transform: translate3d(var(--pg-ar-content-shift-x), var(--pg-ar-content-shift-y), 0); will-change: transform; position: relative; } /* Ensure amount sits ABOVE keypad (guards against any DOM / builder reordering) */ #pg-ar-overlay .pg-ar-enter{ order: 0; width: 100%; } #pg-ar-overlay #pg-ar-keypad{ order: 1; } /* Amount readout */ #pg-ar-entered.pg-ar-entered{ width: 100%; text-align: center; font-size: var(--pg-ar-enter-font-size); line-height: 1; font-weight: var(--pg-ar-enter-font-weight); letter-spacing: 0.5px; color: rgba(255,255,255,0.92); text-shadow: 0 18px 46px rgba(0,0,0,0.65), 0 0 22px rgba(var(--accent-rgb),0.10); user-select: none; pointer-events: none; transform: translate3d(var(--pg-ar-enter-shift-x), var(--pg-ar-enter-shift-y), 0); } /* Keypad grid */ #pg-ar-keypad.pg-ar-keypad{ width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 36px; align-items: center; justify-items: center; padding: 6px 4px 2px; } #pg-ar-keypad .pg-ar-key{ width: 100%; height: 64px; border: 0; background: transparent; color: rgba(255,255,255,0.92); font-size: 34px; font-weight: 300; letter-spacing: 0.2px; border-radius: 18px; position: relative; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation; } #pg-ar-keypad .pg-ar-key span{ display: inline-block; transform: translateZ(0); filter: drop-shadow(0 10px 28px rgba(0,0,0,0.55)); } /* Elegant press feedback (micro animation) */ #pg-ar-keypad .pg-ar-key::before{ content:""; position:absolute; inset: 8px 18px; border-radius: 999px; background: radial-gradient(120px 60px at 50% 55%, rgba(255,255,255,0.10), rgba(255,255,255,0)); opacity: 0; transform: scale(0.86); transition: opacity 140ms ease, transform 160ms cubic-bezier(.2,.9,.2,1); pointer-events:none; } #pg-ar-keypad .pg-ar-key.is-pressed::before{ opacity: 1; transform: scale(1); } #pg-ar-keypad .pg-ar-key.is-pressed span{ transform: scale(0.94); transition: transform 120ms cubic-bezier(.2,.9,.2,1); } /* Backspace icon sizing */ #pg-ar-keypad .pg-ar-key-back{ font-size: 40px; } #pg-ar-keypad .pg-ar-key-back .pg-ar-back{ font-size: 42px; line-height: 1; opacity: 0.92; } } html.pg-ar-overlay-open #pg-ar-overlay{ display: block; } /* When Apply Rewards overlay is open, LOCK the rewards card (no expand/collapse / no pill) */ html.pg-ar-overlay-open #pg-rewards-code .pg-rw-toggle, html.pg-ar-overlay-open #pg-rewards-code .pg-rw-toggle *{ pointer-events: none !important; } html.pg-ar-overlay-open #pg-rewards-code .pg-rw-indicator, html.pg-ar-overlay-open #pg-rewards-code .pg-rw-toggle-chev, html.pg-ar-overlay-open #pg-rewards-code .pg-rw-chev-svg{ opacity: 0 !important; } /* Disable rewards drawer interactions while Apply Rewards overlay is open */ html.pg-ar-overlay-open #pg-rewards-code, html.pg-ar-overlay-open #pg-rewards-code *{ pointer-events: none !important; } html.pg-ar-overlay-open #pg-rw-toggle{ pointer-events: none !important; } /* Keep ONLY the hybrid pay hero ABOVE the overlay (Pay buttons + switch) */ html.pg-ar-overlay-open #pg-hybredpayment-hero{ position: relative; z-index: 10020; } /* Keep the footer dock ABOVE the overlay WITHOUT changing its fixed positioning */ html.pg-ar-overlay-open #pg-mobile-dock.pg-mobile-dock{ position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 10020 !important; } /* Rewards Data OVERVIEW above the overlay (no shift) */ html.pg-ar-overlay-open #pg-rewards-code.pg-rw-card{ position: relative; z-index: 10020; } /* While overlay is open, remove the rewards-card outline/box and keep ONLY a top hairline */ html.pg-ar-overlay-open #pg-rewards-code.pg-rw-card{ background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } /* Replace the full border pseudo with a single top ghost line */ html.pg-ar-overlay-open #pg-rewards-code.pg-rw-card::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(var(--accent-rgb),0.22) 16%, rgba(255,255,255,0.16) 52%, rgba(var(--accent-rgb),0.18) 76%, rgba(255,255,255,0) 100%); opacity: 0.92; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.18)); } html.pg-ar-overlay-open #pg-rewards-code.pg-rw-card::after{ content: none !important; } /* Auto-open rewards drawer while overlay is open (visual only — no input) */ html.pg-ar-overlay-open #pg-rewards-code.pg-rw-card .pg-rw-codebar{ display: none !important; /* hide Enter Rewards Code */ } /* Opacity rules inside the expanded rewards view */ html.pg-ar-overlay-open #pg-rewards-code.pg-rw-card .pg-rw-assetmeta, html.pg-ar-overlay-open #pg-rewards-code.pg-rw-card .pg-rw-mid{ opacity: 0.50; } html.pg-ar-overlay-open #pg-rewards-code.pg-rw-card .pg-rw-title, html.pg-ar-overlay-open #pg-rewards-code.pg-rw-card #pg-rw-usd{ opacity: 1; } } @media (min-width: 521px){ #pg-crypto-meta .pg-ar-body{ display:none !important; } } /* ========================================================= APPLY REWARDS SCREEN (MOBILE ONLY) Triggered by: tapping "Pay Now" (button.pg-hph-side.pg-hph-right) - Reuses #pg-crypto-meta shell + top hairline + top glow - Locks container to expanded height (186px) - Hides the asset-details ribbon/pill for this screen ========================================================= */ @media (max-width: 520px){ /* When Apply Rewards is active */ #pg-crypto-meta.is-ar-open{ height: 186px !important; /* Photoshop measured */ grid-template-rows: 18px 30px auto !important; align-content: start !important; padding-bottom: 14px !important; } /* Keep ONLY the 3 top tiles + their values; hide meta notes in this screen */ #pg-crypto-meta.is-ar-open .pg-crypto-meta-note{ display:none !important; } /* Keep TOTAL visible in Apply Rewards */ #pg-crypto-meta.is-ar-open #pg-crypto-meta-note{ display:block !important; } /* Remove the bottom ribbon/pill for Apply Rewards */ #pg-crypto-meta.is-ar-open .pg-ad-bottom{ display:none !important; } /* Body area (title + switch + available) */ #pg-crypto-meta .pg-ar-body{ display:none; opacity:0; transform: translateY(-6px); transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.2,1); padding: 8px 12px 0 12px; grid-column: 1 / -1; position: relative; z-index: 2; } #pg-crypto-meta.is-ar-open .pg-ar-body{ display:block; opacity:1; transform:none; } #pg-crypto-meta .pg-ar-title{ font-size: 16px; font-weight: 650; letter-spacing: 0.2px; color: rgba(255,255,255,0.92); text-shadow: 0 10px 22px rgba(0,0,0,0.55); margin: -15px 0 10px 0; } #pg-crypto-meta .pg-ar-row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; } /* Switch */ #pg-crypto-meta .pg-ar-switch{ appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; margin: 0; width: 100px; height: 40px; border-radius: 999px; cursor: pointer; position: relative; outline: none; touch-action: pan-y; z-index: 25; pointer-events: auto !important; } #pg-crypto-meta .pg-ar-switch, #pg-crypto-meta .pg-ar-switch *{ pointer-events: auto !important; } #pg-crypto-meta .pg-ar-track{ position:absolute; inset: 0; border-radius: 999px; background: radial-gradient(120% 140% at 50% 24%, rgba(255,255,255,0.08), rgba(0,0,0,0.00) 58%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(235,245,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 30px rgba(0,0,0,0.55); overflow:hidden; } #pg-crypto-meta .pg-ar-track::after{ content:""; position:absolute; inset:0; opacity: 0; transition: opacity 220ms ease; background: radial-gradient(120% 140% at 50% 18%, rgba(var(--pg-ad-rgb),0.28), rgba(0,0,0,0.00) 62%), linear-gradient(180deg, rgba(var(--pg-ad-rgb),0.30), rgba(var(--pg-ad-rgb),0.14)); } #pg-crypto-meta .pg-ar-knob{ position:absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 999px; background: radial-gradient(120% 120% at 40% 30%, rgba(255,255,255,0.22), rgba(255,255,255,0.06) 55%, rgba(0,0,0,0.10) 100%), linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)); border: 1px solid rgba(var(--pg-ad-rgb),0.55); box-shadow: 0 10px 22px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.10); transform: translateX(0); transition: transform 240ms cubic-bezier(.2,.9,.2,1); will-change: transform; } /* ON state */ #pg-crypto-meta .pg-ar-switch.is-on .pg-ar-track::after{ opacity: 1; } #pg-crypto-meta .pg-ar-switch.is-on .pg-ar-knob{ transform: translateX(60px); /* 100 - 4 - 32 - 4 = 60 */ background: radial-gradient(120% 120% at 40% 30%, rgba(255,255,255,0.22), rgba(var(--pg-ad-rgb),0.22) 52%, rgba(0,0,0,0.08) 100%), linear-gradient(180deg, rgba(var(--pg-ad-rgb),0.55), rgba(var(--pg-ad-rgb),0.26)); border-color: rgba(var(--pg-ad-rgb),0.62); box-shadow: 0 12px 26px rgba(0,0,0,0.55), 0 0 18px rgba(var(--pg-ad-rgb),0.18); } /* Rewards meta (right side) */ #pg-crypto-meta .pg-ar-meta{ min-width: 0; display:flex; justify-content:flex-end; flex: 1 1 auto; } #pg-crypto-meta .pg-ar-meta-top{ display:flex; align-items:center; gap: 10px; min-width: 0; } #pg-crypto-meta .pg-ar-zlogo{ width: 20px; height: 20px; margin-top: -21px; border-radius: 7px; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(var(--pg-ad-rgb),0.26)) drop-shadow(0 10px 18px rgba(0,0,0,0.55)); } #pg-crypto-meta .pg-ar-meta-lines{ min-width: 0; } #pg-crypto-meta .pg-ar-meta-line1{ display:flex; align-items:baseline; gap: 8px; white-space: nowrap; } #pg-crypto-meta .pg-ar-ticker{ font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 12px 26px rgba(0,0,0,0.55); } #pg-crypto-meta .pg-ar-price{ font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.78); text-shadow: 0 12px 26px rgba(0,0,0,0.55); } #pg-crypto-meta .pg-ar-meta-line2{ margin-top: 2px; font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.86); text-shadow: 0 12px 26px rgba(0,0,0,0.55), 0 0 14px rgba(255,255,255,0.10); white-space: nowrap; } #pg-crypto-meta .pg-ar-usd{ font-weight: 650; color: rgba(255,255,255,0.96); } } /* --- Step 270: Move Change Arrow + Change Value (90px Right, 30px Up) --- */ /* IMPORTANT: Only targeting the specific selectors requested */ #pg-rewards-code .pg-rw-arrow, #pg-rewards-code .pg-rw-change-val { position: relative; left: 78px; top: -20px; } /* --- Step 311b: Desktop/Tablet hard-hide Rewards Keypad Overlay (remove top-left numbers) --- */ @media (min-width: 521px){ #pg-ar-overlay, #pg-ar-overlay * , #pg-ar-keypad, #pg-ar-entered{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } } /* ========================================================= STEP 1118 — MOBILE ONLY: COMPACT ORDER REVIEW HEADER STANDARD Goal: - Keep the header footprint compact; do NOT add vertical height - No pill-style order card; use a light, elegant rectangular glass outline - Align Total visually to the right edge under ZELEN Pay - Preserve existing .pg-os-total / #pg-order-total-display DOM and payment logic Scope: #pg-order-summary mobile gateway header only (<=520px) ========================================================= */ @media (max-width: 520px){ #pg-order-summary.pg-order-summary{ position: sticky !important; top: 0 !important; z-index: 10050 !important; width: calc(100% + 24px) !important; max-width: none !important; margin: -40px -12px 16px -12px !important; padding: 5px 0px 5px 5px !important; border: 0 !important; border-radius: 0 !important; background: #0b0f12 !important; box-shadow: none !important; overflow: visible !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #pg-order-summary.pg-order-summary::before, #pg-order-summary.pg-order-summary::after{ content: none !important; display: none !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } #pg-order-summary .pg-os-row{ position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; grid-template-rows: 30px 64px !important; column-gap: 10px !important; row-gap: 10px !important; align-items: center !important; align-content: start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; isolation: isolate !important; } /* Elegant order-review outline — not a pill. */ #pg-order-summary .pg-os-row::after{ content: "" !important; grid-column: 1 / -1 !important; grid-row: 2 !important; align-self: stretch !important; justify-self: stretch !important; border-radius: 16px !important; background: radial-gradient(520px 130px at 12% 0%, rgba(255,255,255,0.060), rgba(255,255,255,0.00) 58%), radial-gradient(420px 120px at 92% 16%, rgba(var(--accent-rgb, 0,255,213),0.050), rgba(var(--accent-rgb, 0,255,213),0.00) 66%), linear-gradient(180deg, rgba(15,20,24,0.92), rgba(7,10,12,0.96)) !important; border: 1px solid rgba(150,205,255,0.22) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.025) inset, inset 0 1px 0 rgba(255,255,255,0.045) !important; z-index: 0 !important; pointer-events: none !important; } #pg-order-summary .pg-os-left{ display: contents !important; margin: 0 !important; padding: 0 !important; } #pg-order-summary .pg-os-title{ grid-column: 1 / -1 !important; grid-row: 1 !important; min-height: 30px !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-width: 0 !important; margin: 0 !important; padding: 0 1px !important; position: relative !important; flex-wrap: nowrap !important; white-space: nowrap !important; z-index: 2 !important; } #pg-order-summary .pg-os-title::before, #pg-order-summary .pg-os-title::after{ content: none !important; display: none !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } #pg-order-summary #pg-os-merchant-logo{ order: 1 !important; display: block !important; height: 27px !important; width: auto !important; max-width: 68% !important; min-width: 0 !important; object-fit: contain !important; object-position: left center !important; margin: 0 !important; padding: 0 !important; align-self: center !important; vertical-align: middle !important; transform: none !important; filter: none !important; opacity: 1 !important; } #pg-order-summary .pg-os-brand{ order: 2 !important; flex: 0 0 auto !important; display: block !important; height: 27px !important; width: auto !important; max-width: 32% !important; object-fit: contain !important; object-position: right center !important; margin: 0 !important; padding: 0 !important; align-self: center !important; transform: none !important; filter: none !important; opacity: 0.94 !important; } #pg-order-summary .pg-os-merchant{ grid-column: 1 !important; grid-row: 2 !important; align-self: center !important; justify-self: stretch !important; margin: 0 !important; padding: 0 8px 0 17px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 5px !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; font-size: clamp(14px, 4.65vw, 14px) !important; line-height: 1.02 !important; font-weight: 760 !important; color: rgba(255,255,255,0.96) !important; letter-spacing: -0.025em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; opacity: 1 !important; cursor: pointer !important; pointer-events: auto !important; -webkit-tap-highlight-color: transparent !important; z-index: 2 !important; } #pg-order-summary .pg-os-merchant::after{ content: "3 items • Review ›" !important; display: block !important; max-width: 100% !important; font-size: clamp(13px, 3.85vw, 13px) !important; line-height: 1.04 !important; font-weight: 650 !important; letter-spacing: -0.02em !important; color: rgba(var(--accent-rgb, 0,255,213),0.96) !important; text-shadow: 0 0 10px rgba(var(--accent-rgb, 0,255,213),0.14) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; opacity: 1 !important; } #pg-order-summary #pg-os-toggle.pg-os-details-btn{ position: absolute !important; left: -99999px !important; top: auto !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; max-width: 1px !important; max-height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; } #pg-order-summary .pg-os-right{ grid-column: 2 !important; grid-row: 2 !important; align-self: center !important; justify-self: end !important; margin: 0 !important; padding: 0 17px 0 6px !important; width: auto !important; min-width: max-content !important; max-width: none !important; text-align: right !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; white-space: nowrap !important; cursor: pointer !important; pointer-events: auto !important; z-index: 2 !important; } #pg-order-summary .pg-os-meta, #pg-order-summary .pg-os-demo{ display: none !important; } /* IMPORTANT: Preserve existing Total DOM/value. Visual-only typography/layout. */ #pg-order-summary .pg-os-total{ margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; white-space: nowrap !important; text-align: right !important; font-size: clamp(20px, 6.2vw, 20px) !important; line-height: 1 !important; font-weight: 820 !important; letter-spacing: -0.035em !important; color: rgba(255,255,255,0.98) !important; text-shadow: 0 10px 20px rgba(0,0,0,0.56) !important; } #pg-order-summary .pg-os-total #pg-order-total-display{ display: inline !important; margin-left: 4px !important; } #pg-order-summary .pg-os-drawer{ grid-column: 1 / -1 !important; } } /* ===== END STYLE BLOCK: inline-style ===== */ /* ===== BEGIN STYLE BLOCK: inline-style ===== */ (prevents JS parse failures) Touches: #pg-asset-row and children only ========================================================= */ (function(){ try{ if(document.getElementById('pg-step136-style')) return; var st = document.createElement('style'); st.id = 'pg-step136-style'; st.textContent = '@media (max-width: 520px){\n /* STEP 136 — FIX GLOW CLIP + LAYER FLANKS ABOVE HERO AURA */\n #pg-asset-row{\n contain: layout !important; /* was: layout paint (clips glow) */\n overflow: visible !important; /* allow halos to render */\n padding-bottom: 22px !important; /* gives the glow room so it doesn’t hit a hard edge */\n }\n #pg-asset-row .pg-asset-pill{ position: relative !important; z-index: 2; }\n #pg-asset-row .pg-asset-pill::before,\n #pg-asset-row .pg-asset-pill::after{ z-index: 1; } /* tile highlights stay behind tile contents */\n #pg-asset-row .pg-asset-pill > *{ position: relative; z-index: 3; } /* icon/labels always crisp */\n #pg-asset-row .pg-asset-pill.pg-asset-active{ z-index: 3 !important; }\n #pg-asset-row .pg-asset-pill.pg-asset-active::before{ z-index: 0 !important; } /* HERO aura behind everything */\n #pg-asset-row .pg-asset-pill:not(.pg-asset-active){ z-index: 4 !important; }\n}'; (document.head || document.documentElement).appendChild(st); }catch(_e){} })(); })(); /* ========================================================= STEP 251 — MOBILE ONLY: APPLY REWARDS SCREEN (Pay Now) - Shows rewards number entry ONLY when rewards > 0 - Reuses the existing mobile rewards overlay / keypad - Bypasses the inline Apply Rewards toggle on first Pay click ========================================================= */ (function(){ // Mobile definition: keep aligned with the rest of the gateway (<= 640px). const mq = window.matchMedia ? window.matchMedia('(max-width: 640px)') : { matches:false }; function isMobile(){ const w = Math.min(window.innerWidth || 9999, document.documentElement.clientWidth || 9999); return (w <= 640) || !!mq.matches; } function numFrom(el){ if(!el) return 0; const t = (el.textContent || '').replace(/[^0-9.]+/g,''); const n = parseFloat(t); return Number.isFinite(n) ? n : 0; } // Bind once the required DOM exists (Duda can reorder/mount after scripts run). const START = Date.now(); const MAX_WAIT_MS = 6000; function init(){ const metaCard = document.getElementById('pg-crypto-meta'); const arBody = document.getElementById('pg-ar-body'); const arSwitch = document.getElementById('pg-ar-switch'); const arPrice = document.getElementById('pg-ar-price'); const arUsd = document.getElementById('pg-ar-usd'); const rwUsd = document.getElementById('pg-rw-usd'); const rwPrice = document.getElementById('pg-rw-price'); if(!metaCard || !arBody || !arSwitch){ if(Date.now() - START < MAX_WAIT_MS) requestAnimationFrame(init); return; } if(metaCard.dataset.pgArBound === '1') return; metaCard.dataset.pgArBound = '1'; function setArVisible(visible){ arBody.setAttribute('aria-hidden', visible ? 'false' : 'true'); // Inline overrides guarantee visibility even if other CSS rules win. if(visible){ arBody.style.display = 'block'; arBody.style.opacity = '1'; arBody.style.pointerEvents = 'auto'; }else{ arBody.style.display = 'none'; arBody.style.opacity = '0'; arBody.style.pointerEvents = 'none'; } } // --- Switch logic (tap + drag) --- // --- Rewards Amount Overlay (black overlay) --- const arOverlay = document.getElementById('pg-ar-overlay'); let pgArPrevRewardsOpen = null; function forceRewardsDrawerOpenForOverlay(open){ const card = document.getElementById('pg-rewards-code'); if(!card) return; const toggleBtn = document.getElementById('pg-rw-toggle'); const meta = card.querySelector('.pg-rw-assetmeta'); if(open){ if(pgArPrevRewardsOpen === null) pgArPrevRewardsOpen = card.classList.contains('is-code-open'); card.classList.add('is-code-open'); document.documentElement.classList.add('pg-rw-open'); if(toggleBtn) toggleBtn.setAttribute('aria-expanded','true'); if(meta) meta.setAttribute('aria-hidden','false'); }else{ if(pgArPrevRewardsOpen === null) return; const shouldOpen = !!pgArPrevRewardsOpen; card.classList.toggle('is-code-open', shouldOpen); document.documentElement.classList.toggle('pg-rw-open', shouldOpen); if(toggleBtn) toggleBtn.setAttribute('aria-expanded', shouldOpen ? 'true':'false'); if(meta) meta.setAttribute('aria-hidden', shouldOpen ? 'false':'true'); pgArPrevRewardsOpen = null; } } let arOverlayTimer = null; function positionRewardsAmountOverlay(){ if(!arOverlay) return; // Bounds: top of #pg-rewards-code → top of #pg-hybredpayment-hero const rewardsCard = document.getElementById('pg-rewards-code'); const payHero = document.getElementById('pg-hybredpayment-hero'); const r = rewardsCard ? rewardsCard.getBoundingClientRect() : { top: 0 }; const p = payHero ? payHero.getBoundingClientRect() : { top: window.innerHeight }; const top = Math.max(0, Math.round(r.top)); const bottom = Math.max(0, Math.round(window.innerHeight - p.top)); arOverlay.style.top = top + 'px'; arOverlay.style.bottom = bottom + 'px'; // Match inner layout to the visible Rewards card height try{ const h = rewardsCard ? Math.max(0, Math.round(rewardsCard.getBoundingClientRect().height)) : 74; arOverlay.style.setProperty('--pg-ar-rewards-h', h + 'px'); }catch(e){} } function openRewardsAmountOverlay(){ if(!isMobile()) return; if(!arOverlay) return; // LOCK immediately so Rewards drawer cannot close during the micro-delay document.documentElement.classList.add('pg-ar-overlay-lock'); // micro-delay (prevents "instant pop" and matches SoT feel) if(arOverlayTimer) clearTimeout(arOverlayTimer); arOverlayTimer = setTimeout(function(){ document.documentElement.classList.add('pg-ar-overlay-open'); arOverlay.setAttribute('aria-hidden','false'); positionRewardsAmountOverlay(); // Force Rewards drawer OPEN while overlay is active (prevents close/expand behind keypad) forceRewardsDrawerOpenForOverlay(true); try{ bindRewardsAmountKeypad(); }catch(e){} }, 90); } function closeRewardsAmountOverlay(){ if(arOverlayTimer) clearTimeout(arOverlayTimer); arOverlayTimer = null; document.documentElement.classList.remove('pg-ar-overlay-open'); document.documentElement.classList.remove('pg-ar-overlay-lock'); if(arOverlay) arOverlay.setAttribute('aria-hidden','true'); // Restore rewards drawer state forceRewardsDrawerOpenForOverlay(false); // Reset preview values when closing Apply Rewards try{ pgArCents = 0; pgArRender && pgArRender(); }catch(e){} // IMPORTANT: If user clicked Pay, we MUST NOT restore base totals (this would revert $0.01 -> $128.47). const lock = (typeof window.pgLockedTotalUSD === "number") ? window.pgLockedTotalUSD : parseFloat(String(window.pgLockedTotalUSD || "").replace(/[^0-9.]/g,'')); if(!(Number.isFinite(lock) && lock > 0)){ try{ pgArRestoreBase && pgArRestoreBase(); }catch(e){} try{ pgArBase = null; }catch(e){} } } /* ========================================================= APPLY REWARDS — VALUE ENTRY + KEYPAD (MOBILE ONLY) Step 1: Visual keypad + live amount readout (#pg-ar-entered) (Wiring to totals + token math happens next step.) ========================================================= */ let pgArCents = 0; let pgArBound = false; function pgArFormatCents(cents){ const v = Math.max(0, Math.floor(cents || 0)); const dollars = (v / 100); return dollars.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } function pgArFormatUsd(n){ const v = Math.max(0, Number(n || 0)); return v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } let pgArBase = null; /* Capture the "pre-apply" baseline once per open session */ function pgArCaptureBase(){ if(pgArBase) return pgArBase; const getNum = (el)=>{ if(!el) return null; const t = (el.textContent || '').replace(/[^0-9.]/g,'').trim(); const v = parseFloat(t); return isFinite(v) ? v : null; }; const orderEl = document.getElementById('pg-order-total-display') || document.querySelector('.pg-meta-total-amount'); const rewardsEl = document.getElementById('pg-rw-usd'); const tokenEl = document.getElementById('pg-rw-amt'); // price is shown as "$0.0375" inside the rewards card; keep 4dp+ if present const priceEl = document.querySelector('#pg-rewards-code .pg-rw-price, #pg-rewards-code [data-pg-rw-price], #pg-rewards-code .pg-rw-priceval'); const order = getNum(orderEl) ?? 0; const rewards = getNum(rewardsEl) ?? 0; const tokenAmt = getNum(tokenEl) ?? 0; const tokenPrice = getNum(priceEl) ?? 0.0375; pgArBase = { order, rewards, tokenAmt, tokenPrice }; return pgArBase; } function pgArRestoreBase(){ if(!pgArBase) return; const setTextAll = (sel, txt)=>{ document.querySelectorAll(sel).forEach(el=>{ try{ el.textContent = txt; }catch(e){} }); }; const setOne = (id, txt)=>{ const el = document.getElementById(id); if(el) el.textContent = txt; }; setTextAll('.pg-meta-total-amount', '$' + pgArFormatUsd(pgArBase.order)); setOne('pg-order-total-display', '$' + pgArFormatUsd(pgArBase.order)); setOne('pg-rw-usd', pgArFormatUsd(pgArBase.rewards)); // Token amount: keep 4 decimals (matches SoT) const tokenTxt = (pgArBase.tokenAmt || 0).toLocaleString(undefined, { minimumFractionDigits: 4, maximumFractionDigits: 4 }); const tokenEl = document.getElementById('pg-rw-amt'); if(tokenEl) tokenEl.textContent = tokenTxt; pgArUpdatePayNowLabel(pgArBase.order); } function pgArUpdatePayNowLabel(total){ const line1 = document.querySelector('#pg-hybredpayment-hero .pg-hph-right .pg-hph-line1'); if(!line1) return; line1.textContent = 'Pay $' + pgArFormatUsd(total); } function pgArGetLiveState(){ const base = pgArCaptureBase(); const entered = (Math.max(0, Math.floor(pgArCents || 0)) / 100); const applied = Math.min(entered, base.rewards, base.order); const remainingOrder = Math.max(0, base.order - applied); const remainingRewards = Math.max(0, base.rewards - applied); const usedTokens = base.tokenPrice > 0 ? (applied / base.tokenPrice) : 0; const remainingTokens = Math.max(0, base.tokenAmt - usedTokens); return { baseOrder: Math.max(0, Number(base.order || 0)), baseRewards: Math.max(0, Number(base.rewards || 0)), applied: Math.max(0, Number(applied || 0)), remainingOrder: Math.max(0, Number(remainingOrder || 0)), remainingRewards: Math.max(0, Number(remainingRewards || 0)), usedTokens: Math.max(0, Number(usedTokens || 0)), remainingTokens: Math.max(0, Number(remainingTokens || 0)) }; } function pgArLockAppliedState(){ try{ const state = pgArGetLiveState(); window.pgLockedRewardsBaseUSD = state.baseRewards; window.pgLockedRewardsAppliedUSD = state.applied; window.pgLockedRewardsSavedUSD = state.applied; window.pgLockedRewardsBalanceUSD = state.remainingRewards; window.pgLockedTotalUSD = state.remainingOrder; return state; }catch(e){ return null; } } function pgArSyncOutputs(){ const state = pgArGetLiveState(); const remainingOrder = state.remainingOrder; const remainingRewards = state.remainingRewards; const remainingTokens = state.remainingTokens; // Update totals everywhere document.querySelectorAll('.pg-meta-total-amount').forEach(el=>{ el.textContent = '$' + pgArFormatUsd(remainingOrder); }); const orderEl = document.getElementById('pg-order-total-display'); if(orderEl) orderEl.textContent = '$' + pgArFormatUsd(remainingOrder); // Rewards total (available) is shown without $ in SoT const rwUsd = document.getElementById('pg-rw-usd'); if(rwUsd) rwUsd.textContent = pgArFormatUsd(remainingRewards); // Token amount (4 decimals) const tokenEl = document.getElementById('pg-rw-amt'); if(tokenEl){ tokenEl.textContent = remainingTokens.toLocaleString(undefined, { minimumFractionDigits: 4, maximumFractionDigits: 4 }); } // Pay button label pgArUpdatePayNowLabel(remainingOrder); } function pgArRender(){ const el = document.getElementById('pg-ar-entered'); if(el) el.textContent = '$' + pgArFormatCents(pgArCents); // Live-wire the preview outputs while the overlay is active if(document.documentElement.classList.contains('pg-ar-overlay-open') || document.documentElement.classList.contains('pg-ar-overlay-lock')){ try{ pgArSyncOutputs(); }catch(e){} } } function pgArPressFx(btn){ if(!btn) return; btn.classList.add('is-pressed'); window.setTimeout(()=>btn.classList.remove('is-pressed'), 140); } function pgArHandleKey(k){ // Money keypad: digits build cents (auto-decimal). Dot is a no-op (kept for layout parity). if(k === 'back'){ pgArCents = Math.floor(pgArCents / 10); pgArRender(); return; } if(k === '.'){ return; } if(/^\d$/.test(k)){ // Cap at $999,999.99 (prevents overflow / layout issues) const next = pgArCents * 10 + parseInt(k, 10); if(next <= 99999999){ pgArCents = next; pgArRender(); } } } function bindRewardsAmountKeypad(){ if(pgArBound) return; const pad = document.getElementById('pg-ar-keypad'); if(!pad) return; // Ensure keypad + amount are wrapped in a movable stack (prevents layout overrides) try{ const entered = document.getElementById('pg-ar-entered'); const inner = arOverlay ? arOverlay.querySelector('.pg-ar-inner') : null; if(inner && entered && pad){ let stack = inner.querySelector('.pg-ar-stack'); if(!stack){ stack = document.createElement('div'); stack.className = 'pg-ar-stack'; // Insert stack where the entered value currently is (keeps DOM order) inner.insertBefore(stack, entered); } if(entered.parentElement !== stack) stack.appendChild(entered); if(pad.parentElement !== stack) stack.appendChild(pad); } }catch(e){} pad.addEventListener('click', function(e){ const btn = e.target.closest('.pg-ar-key'); if(!btn) return; e.preventDefault(); e.stopPropagation(); const k = btn.getAttribute('data-k') || ''; pgArPressFx(btn); pgArHandleKey(k); }, { passive:false }); pgArBound = true; pgArRender(); // default $0.00 // Set default Pay button label to include current order total try{ const orderEl = document.getElementById('pg-order-total-display') || document.querySelector('.pg-meta-total-amount'); const t = orderEl ? (orderEl.textContent || '').replace(/[^0-9.]/g,'') : ''; const v = parseFloat(t); if(isFinite(v)) pgArUpdatePayNowLabel(v); }catch(e){} } let isOn = false; function setSwitch(on, silent){ isOn = !!on; arSwitch.classList.toggle('is-on', isOn); arSwitch.setAttribute('aria-pressed', isOn ? 'true' : 'false'); // Sync Rewards drawer visibility with the overlay (visual-only, no layout shift) try{ const rewardsCard = document.getElementById('pg-rewards-code'); const rwToggle = document.getElementById('pg-rw-toggle'); if(rewardsCard){ rewardsCard.classList.toggle('is-code-open', isOn); } document.documentElement.classList.toggle('pg-rw-open', isOn); if(rwToggle){ rwToggle.setAttribute('aria-expanded', isOn ? 'true' : 'false'); } }catch(e){} if(isOn){ if(!silent && typeof openRewardsAmountOverlay === 'function') openRewardsAmountOverlay(); }else{ if(typeof closeRewardsAmountOverlay === 'function') closeRewardsAmountOverlay(true); } } arSwitch.addEventListener('click', function(e){ if(!isMobile()) return; e.preventDefault(); e.stopPropagation(); setSwitch(!isOn); }, { passive:false }); // Drag / swipe let down = false; let startX = 0; let startOn = false; function pxFromEvent(ev){ const t = ev.touches && ev.touches[0] ? ev.touches[0] : ev; return t.clientX || 0; } arSwitch.addEventListener('pointerdown', function(e){ if(!isMobile()) return; down = true; startX = pxFromEvent(e); startOn = isOn; try{ arSwitch.setPointerCapture(e.pointerId); }catch(_){} }); arSwitch.addEventListener('pointermove', function(e){ if(!down || !isMobile()) return; const dx = pxFromEvent(e) - startX; if(dx > 10) setSwitch(true, true); if(dx < -10) setSwitch(false, true); }); function endDrag(){ if(!down) return; down = false; if(isOn && !startOn){ if(typeof openRewardsAmountOverlay === 'function') openRewardsAmountOverlay(); } } arSwitch.addEventListener('pointerup', endDrag); arSwitch.addEventListener('pointercancel', endDrag); arSwitch.addEventListener('lostpointercapture', endDrag); // STEP 349 — pay-screen toggle hardening // The Apply Rewards switch must still open the keypad on the in-store pay screen, // even if another layer lands above the button after bind. const arTrack = arSwitch.querySelector('.pg-ar-track'); const arKnob = arSwitch.querySelector('.pg-ar-knob'); function forceApplyRewardsToggleOn(e){ if(!isMobile()) return; if(e){ if(typeof e.preventDefault === 'function') e.preventDefault(); if(typeof e.stopPropagation === 'function') e.stopPropagation(); if(typeof e.stopImmediatePropagation === 'function') e.stopImmediatePropagation(); } try{ closeAssetData(); }catch(_e){} try{ metaCard.classList.add('is-ar-open'); setArVisible(true); }catch(_e){} if(!isOn){ setSwitch(true); }else if(typeof openRewardsAmountOverlay === 'function'){ openRewardsAmountOverlay(); } } [arSwitch, arTrack, arKnob].forEach(function(node){ if(!node || node.__pgArForceBound) return; node.__pgArForceBound = true; node.addEventListener('click', forceApplyRewardsToggleOn, true); node.addEventListener('touchend', forceApplyRewardsToggleOn, { capture:true, passive:false }); node.addEventListener('pointerup', forceApplyRewardsToggleOn, true); }); // --- Apply Rewards open/close --- // Close the Asset Data expanded state (prevents collision with Apply Rewards UI) function closeAssetData(){ try{ if(metaCard.classList.contains('is-ad-open')){ metaCard.classList.remove('is-ad-open'); const adBtn = document.getElementById('pg-ad-toggle'); if(adBtn) adBtn.setAttribute('aria-expanded','false'); } }catch(e){} } function closeApplyRewards(){ metaCard.classList.remove('is-ar-open'); setArVisible(false); } // ============================ // TX STATUS OVERLAY (MOBILE) // ============================ const txOverlay = document.getElementById('pg-tx-overlay'); const txTitle = document.getElementById('pg-tx-title'); const txSub = document.getElementById('pg-tx-sub'); const txRoot = document.getElementById('crypto-gateway-demo-root'); let pgTxCountdownTimer = null; let pgTxCountdownEndsAt = 0; function pgGetActiveAssetSubLabel(){ try{ return document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-label-sub'); }catch(e){ return null; } } function pgRenderTxCountdown(){ try{ const label = pgGetActiveAssetSubLabel(); if(!label) return; const remaining = Math.max(0, Math.ceil((pgTxCountdownEndsAt - Date.now()) / 1000)); const mm = Math.floor(remaining / 60); const ss = remaining % 60; label.textContent = mm + ':' + String(ss).padStart(2,'0'); }catch(e){} } function pgStopTxCountdown(){ try{ if(pgTxCountdownTimer){ clearInterval(pgTxCountdownTimer); } }catch(e){} pgTxCountdownTimer = null; pgTxCountdownEndsAt = 0; try{ const label = pgGetActiveAssetSubLabel(); if(label){ if(label.dataset && Object.prototype.hasOwnProperty.call(label.dataset, 'txOrigText')) label.textContent = label.dataset.txOrigText || ''; label.removeAttribute('data-tx-countdown'); if(label.dataset) delete label.dataset.txOrigText; } }catch(e){} try{ if(txRoot) txRoot.classList.remove('pg-tx-countdown-active'); }catch(e){} } function pgStartTxCountdown(){ try{ pgStopTxCountdown(); }catch(e){} try{ const label = pgGetActiveAssetSubLabel(); if(!label) return; if(label.dataset) label.dataset.txOrigText = label.textContent || ''; label.setAttribute('data-tx-countdown','true'); pgTxCountdownEndsAt = Date.now() + (120 * 1000); if(txRoot) txRoot.classList.add('pg-tx-countdown-active'); pgRenderTxCountdown(); pgTxCountdownTimer = setInterval(function(){ const remainingMs = pgTxCountdownEndsAt - Date.now(); if(remainingMs <= 0){ pgRenderTxCountdown(); try{ if(pgTxCountdownTimer){ clearInterval(pgTxCountdownTimer); } }catch(e){} pgTxCountdownTimer = null; return; } pgRenderTxCountdown(); }, 1000); }catch(e){} } function pgClearPendingFlowClasses(){ try{ if(txRoot) txRoot.classList.remove('pg-tx-flow-s1','pg-tx-flow-s2','pg-tx-flow-s3','pg-tx-flow-s4'); }catch(e){} } function pgStartPendingFlow(){ try{ pgClearPendingFlowClasses(); }catch(e){} try{ pgClearCompleteFlowClasses(); }catch(e){} try{ if(!txRoot) return; txRoot.classList.add('pg-tx-flow-s1'); }catch(e){} setTimeout(function(){ try{ if(txRoot) txRoot.classList.add('pg-tx-flow-s2'); }catch(e){} }, 850); setTimeout(function(){ try{ if(txRoot) txRoot.classList.add('pg-tx-flow-s3'); }catch(e){} }, 1900); } function pgClearCompleteFlowClasses(){ try{ if(txRoot) txRoot.classList.remove('pg-tx-complete-s1','pg-tx-complete-s2','pg-tx-complete-s3','pg-tx-complete-s4'); }catch(e){} try{ if(txRoot) txRoot.classList.remove('pg-tx-flow-s1','pg-tx-flow-s2','pg-tx-flow-s3','pg-tx-flow-s4'); }catch(e){} try{ if(window.pgTxCompleteFlowTimers && window.pgTxCompleteFlowTimers.length){ window.pgTxCompleteFlowTimers.forEach(function(t){ try{ clearTimeout(t); }catch(e){} }); } }catch(e){} try{ window.pgTxCompleteFlowTimers = []; }catch(e){} try{ window.pgTxRewardFinalLocked = false; }catch(e){} try{ window.pgTxRewardHeroRevealSignature = ''; }catch(e){} try{ var animated = document.querySelectorAll('#pg-tx-overlay .pg-tx-asset-paid, #pg-tx-overlay .pg-tx-asset-lock, #pg-tx-overlay .pg-tx-asset-lock svg, #pg-tx-overlay .pg-tx-asset-reward, #pg-tx-overlay .pg-tx-asset-reward img, #pg-tx-overlay .pg-tx-flow-beam, #pg-tx-overlay .pg-tx-flow-beam::before, #pg-tx-overlay .pg-tx-flow-beam::after, #pg-tx-overlay .pg-tx-pending-grid, #pg-tx-overlay .pg-tx-pending-copy, #pg-tx-overlay #pg-tx-rewards-main, #pg-tx-overlay #pg-tx-rewards-sub'); animated.forEach(function(el){ try{ el.style.animation = 'none'; }catch(e){} try{ el.offsetHeight; }catch(e){} try{ el.style.animation = ''; }catch(e){} }); }catch(e){} try{ var beam = document.querySelector('#pg-tx-overlay .pg-tx-flow-beam'); if(beam){ beam.style.opacity = '0'; } }catch(e){} } function pgRunTxAnimation(sel, animation, extra){ try{ var el = document.querySelector(sel); if(!el) return; el.style.animation = 'none'; void el.offsetWidth; el.style.animation = animation; if(typeof extra === 'function'){ try{ extra(el); }catch(e){} } }catch(e){} } /* ========================================================= STEP 1107 — MOBILE TX REWARDS POST-ANIMATION VALUE LOCK Scope: mobile TX reward values only. No carousel, animation CSS, Radom, wallet, QR, polling, webhook, session, or trigger changes. Formula: order total × 10% ÷ $0.0375 Writes only after the existing reward hero animation completes. ========================================================= */ function pgReadMobileTxOrderTotalForRewards(){ try{ var selectors = [ '#pg-order-total-display', '#pg-auth-total-display', '#pg-od-total', '.pg-os-total', '#pg-hybredpayment-hero .pg-hph-main', '#pg-hybredpayment-hero', '#pg-pay-btn', '.pg-pay-btn' ]; for(var i = 0; i < selectors.length; i++){ var el = document.querySelector(selectors[i]); if(!el) continue; var txt = String(el.textContent || ''); var m = txt.match(/\$\s*([0-9]+(?:\.[0-9]{1,2})?)/); var n = m ? parseFloat(m[1]) : parseFloat(txt.replace(/[^0-9.]/g,'')); if(Number.isFinite(n) && n > 0) return n; } var locked = parseFloat(String(window.pgLockedTotalUSD || '').replace(/[^0-9.]/g,'')); if(Number.isFinite(locked) && locked > 0) return locked; }catch(e){} return 0; } function pgIsMobileTxRewardsScope(){ try{ if(window.matchMedia && window.matchMedia('(max-width: 640px)').matches) return true; var root = document.getElementById('crypto-gateway-demo-root'); var widths = [window.innerWidth || 0, document.documentElement ? document.documentElement.clientWidth : 0, root ? root.clientWidth : 0].filter(function(v){ return Number.isFinite(v) && v > 0; }); var minW = widths.length ? Math.min.apply(Math, widths) : 9999; if(minW <= 640) return true; if(document.body && /dmMobileBody/.test(document.body.className || '')) return true; }catch(e){} return false; } function pgTriggerMobileTxRewardHeroReveal(tokenText, usdText){ try{ if(!pgIsMobileTxRewardsScope()) return; if(!tokenText || !usdText || tokenText === '+0 ZLNC' || usdText === '=$0.00') return; var sig = String(tokenText) + '|' + String(usdText); if(window.pgTxRewardHeroRevealSignature === sig) return; window.pgTxRewardHeroRevealSignature = sig; var mainEl = document.getElementById('pg-tx-rewards-main') || document.getElementById('pg-tx-reward-token'); var subEl = document.getElementById('pg-tx-rewards-sub') || document.getElementById('pg-tx-reward-usd'); [mainEl, subEl].forEach(function(el){ if(!el) return; try{ el.classList.remove('pg-step1108-reward-hero-reveal'); }catch(e){} try{ void el.offsetWidth; }catch(e){} try{ el.classList.add('pg-step1108-reward-hero-reveal'); }catch(e){} }); try{ window.setTimeout(function(){ [mainEl, subEl].forEach(function(el){ try{ if(el) el.classList.remove('pg-step1108-reward-hero-reveal'); }catch(e){} }); }, 980); }catch(e){} }catch(e){} } function pgApplyMobileTxRewardFinalValues(forceTotal){ try{ if(!pgIsMobileTxRewardsScope()) return; var mainEl = document.getElementById('pg-tx-rewards-main'); var subEl = document.getElementById('pg-tx-rewards-sub'); var tokenEl = document.getElementById('pg-tx-reward-token'); var usdEl = document.getElementById('pg-tx-reward-usd'); if(!mainEl && !subEl && !tokenEl && !usdEl) return; function pgTxRewardsNum(v){ var n = parseFloat(String(v || '').replace(/[^0-9.]/g,'')); return Number.isFinite(n) ? n : NaN; } function pgTxRewardsFmtNum(n, decimals){ if(!Number.isFinite(n)) return '0'; return Number(n).toFixed(decimals).replace(/\.?0+$/,''); } function pgTxRewardsFmtMoney(n){ if(!Number.isFinite(n)) n = 0; return '$' + Number(n).toFixed(2); } var total = pgTxRewardsNum(forceTotal); if(!(Number.isFinite(total) && total > 0)){ try{ var p = window.pgLastTxCompletePayload || window.pgLastWebhookCompletionPayload || null; total = pgTxRewardsNum(p && (p.total || p.amount || p.amount_paid_usd || p.amountPaidUsd || p.amount_usd || p.usd)); }catch(_e){} } if(!(Number.isFinite(total) && total > 0)) total = pgReadMobileTxOrderTotalForRewards(); var rewardsUsd = (Number.isFinite(total) && total > 0) ? (total * 0.10) : 0; var zlncPrice = 0.0375; var rewardsTokens = rewardsUsd > 0 ? (rewardsUsd / zlncPrice) : 0; var tokenText = rewardsTokens > 0 ? ('+' + pgTxRewardsFmtNum(rewardsTokens, 6) + ' ZLNC') : '+0 ZLNC'; var usdText = rewardsUsd > 0 ? ('=' + pgTxRewardsFmtMoney(rewardsUsd)) : '=$0.00'; if(mainEl){ mainEl.textContent = tokenText; } if(tokenEl){ tokenEl.textContent = tokenText; } if(subEl){ subEl.textContent = usdText; try{ subEl.style.setProperty('font-size','20px','important'); }catch(e){} } if(usdEl){ usdEl.textContent = usdText; try{ usdEl.style.setProperty('font-size','20px','important'); }catch(e){} } try{ pgTriggerMobileTxRewardHeroReveal(tokenText, usdText); }catch(e){} try{ window.pgTxRewardOrderTotalUSD = total; }catch(e){} try{ window.pgTxRewardUsd = rewardsUsd; }catch(e){} try{ window.pgTxRewardZlnc = rewardsTokens; }catch(e){} try{ window.pgLockedRewardsEarnedUSD = rewardsUsd; }catch(e){} try{ window.pgReceiptRewardsEarnedUSD = rewardsUsd; }catch(e){} try{ window.pgTxRewardFinalTokenText = tokenText; window.pgTxRewardFinalUsdText = usdText; window.pgTxRewardFinalLocked = rewardsTokens > 0 || rewardsUsd > 0; }catch(e){} }catch(e){} } function pgScheduleMobileTxRewardValueSync(forceTotal){ try{ if(!pgIsMobileTxRewardsScope()) return; var delays = [4625, 4685, 4825, 5100, 5450]; delays.forEach(function(ms){ try{ setTimeout(function(){ pgApplyMobileTxRewardFinalValues(forceTotal); }, ms); }catch(_e){} }); }catch(e){} } try{ window.pgSyncMobileTxRewards = pgApplyMobileTxRewardFinalValues; }catch(e){} function pgStartCompleteFlow(){ try{ pgClearPendingFlowClasses(); }catch(e){} try{ pgClearCompleteFlowClasses(); }catch(e){} try{ if(txRoot){ void txRoot.offsetWidth; txRoot.classList.add('pg-tx-flow-s1'); } }catch(e){} try{ window.pgTxCompleteFlowTimers = []; }catch(e){} try{ pgRunTxAnimation('#pg-tx-overlay .pg-tx-asset-paid','pgChargeUp 1.05s cubic-bezier(.2,.9,.2,1) 1, pgFocusPulse 1.20s ease-in-out 1'); pgRunTxAnimation('#pg-tx-overlay #pg-tx-asset-paid-logo','pgLogoNudge 1.05s ease-out 1'); }catch(e){} try{ window.pgTxCompleteFlowTimers.push(setTimeout(function(){ try{ if(txRoot) txRoot.classList.add('pg-tx-flow-s2'); }catch(e){} try{ pgRunTxAnimation('#pg-tx-overlay .pg-tx-asset-lock','pgLockEngage 1.10s cubic-bezier(.2,.9,.2,1) 1, pgFocusPulse 1.20s ease-in-out 1'); }catch(e){} try{ pgRunTxAnimation('#pg-tx-overlay .pg-tx-asset-lock svg','pgLockSpin 1.20s ease-in-out 1'); }catch(e){} try{ var beam = document.querySelector('#pg-tx-overlay .pg-tx-flow-beam'); if(beam){ beam.style.opacity = '1'; beam.style.animation = 'none'; void beam.offsetWidth; beam.style.animation = 'pgFlowBeamSweep 1.60s ease-in-out 1'; } }catch(e){} }, 900)); }catch(e){} try{ window.pgTxCompleteFlowTimers.push(setTimeout(function(){ try{ if(txRoot) txRoot.classList.add('pg-tx-flow-s3'); }catch(e){} try{ pgRunTxAnimation('#pg-tx-overlay .pg-tx-asset-reward','pgRewardBloom 1.15s cubic-bezier(.2,.9,.2,1) 1, pgFocusPulse 1.20s ease-in-out 1'); }catch(e){} try{ pgRunTxAnimation('#pg-tx-overlay #pg-tx-asset-reward-logo','pgRewardShimmer 1.25s ease-in-out 1'); }catch(e){} }, 2000)); }catch(e){} try{ window.pgTxCompleteFlowTimers.push(setTimeout(function(){ try{ if(txRoot) txRoot.classList.add('pg-tx-flow-s4'); }catch(e){} try{ pgRunTxAnimation('#pg-tx-overlay .pg-tx-pending-grid','pgRewardsHero 1.25s cubic-bezier(.18,.98,.18,1) 1, pgFocusPulse 1.20s ease-in-out 1'); }catch(e){} try{ pgRunTxAnimation('#pg-tx-overlay #pg-tx-rewards-main','pgRewardsTextPop 1.05s cubic-bezier(.18,.98,.18,1) 1'); }catch(e){} try{ pgRunTxAnimation('#pg-tx-overlay #pg-tx-rewards-sub','pgRewardsTextPop 1.05s cubic-bezier(.18,.98,.18,1) 1'); }catch(e){} try{ setTimeout(pgApplyMobileTxRewardFinalValues, 1290); }catch(e){} try{ setTimeout(pgApplyMobileTxRewardFinalValues, 1360); }catch(e){} try{ setTimeout(pgApplyMobileTxRewardFinalValues, 1520); }catch(e){} try{ setTimeout(pgApplyMobileTxRewardFinalValues, 1850); }catch(e){} }, 3300)); }catch(e){} } function pgSetTxPendingData(){ try{ const paidLogo = document.getElementById('pg-tx-asset-paid-logo'); const rewardLogo = document.getElementById('pg-tx-asset-reward-logo'); const rewardsMain = document.getElementById('pg-tx-rewards-main'); const rewardsSub = document.getElementById('pg-tx-rewards-sub'); const odTotalLive = document.getElementById('pg-od-total'); const activePill = document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active, #pg-asset-row .pg-asset-pill.is-active, #pg-asset-row .pg-asset-pill[aria-selected="true"]'); const activeAsset = (activePill && (activePill.getAttribute('data-asset') || (activePill.dataset && activePill.dataset.asset))) ? String(activePill.getAttribute('data-asset') || activePill.dataset.asset).toUpperCase().trim() : ((state && state.selectedAsset) ? String(state.selectedAsset).toUpperCase().trim() : 'ETH'); const activeAssetImg = activePill ? activePill.querySelector('.pg-asset-logo') : document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-logo'); const ASSET_LOGOS = { BTC: 'https://irp.cdn-website.com/630a36f4/dms3rep/multi/BTC.png', ETH: 'https://irp.cdn-website.com/630a36f4/dms3rep/multi/ETH.png', USDT: 'https://irp.cdn-website.com/630a36f4/dms3rep/multi/USDT.png', XRP: 'https://irp.cdn-website.com/630a36f4/dms3rep/multi/XRP.png', BNB: 'https://irp.cdn-website.com/630a36f4/dms3rep/multi/BNB.png', SOL: 'https://irp.cdn-website.com/630a36f4/dms3rep/multi/SOL.png', ZLNC: 'https://irp.cdn-website.com/630a36f4/dms3rep/multi/ZELEN_ZLNC.png' }; if(paidLogo){ const rawSrc = activeAssetImg ? (activeAssetImg.currentSrc || activeAssetImg.src || activeAssetImg.getAttribute('src') || '') : ''; const resolvedLogo = rawSrc || ASSET_LOGOS[activeAsset] || ASSET_LOGOS.ETH; paidLogo.src = resolvedLogo; paidLogo.setAttribute('src', resolvedLogo); paidLogo.alt = activeAsset + ' logo'; try{ paidLogo.closest('.pg-tx-asset-paid').setAttribute('data-tx-asset-label', activeAsset); }catch(_e){} } if(rewardLogo) rewardLogo.src = ASSET_LOGOS.ZLNC; const totalTxt = (odTotalLive && odTotalLive.textContent) ? odTotalLive.textContent.trim() : ''; const totalFromDetails = parseFloat(String(totalTxt).replace(/[^\d.]/g,'')); const lockedTotal = parseFloat(String(window.pgLockedTotalUSD || '').replace(/[^\d.]/g,'')); const baseTotal = Number.isFinite(totalFromDetails) ? totalFromDetails : (Number.isFinite(lockedTotal) ? lockedTotal : 0); const zlPriceEl = document.querySelector('#pg-rewards-code .pg-rw-price, #pg-rewards-code [data-pg-rw-price], #pg-rewards-code .pg-rw-priceval'); const zlPrice = parseFloat(String(zlPriceEl ? zlPriceEl.textContent : '').replace(/[^\d.]/g,'')) || 0.0375; const rewardsUsd = Number.isFinite(baseTotal) ? (baseTotal * 0.10) : 0; const rewardsTokens = (Number.isFinite(zlPrice) && zlPrice > 0) ? (rewardsUsd / zlPrice) : 0; if(window.pgTxRewardFinalLocked){ try{ pgApplyMobileTxRewardFinalValues(baseTotal); }catch(_e){} }else{ if(rewardsMain) rewardsMain.textContent = '+0 ZLNC'; if(rewardsSub) rewardsSub.textContent = '=$0.00'; } }catch(e){} } // ========================================================= // TX Overlay: visual-only stage layout lock (mobile) // IMPORTANT: does NOT change pending/complete trigger logic. // It only styles the already-live TX overlay nodes for both // pending + complete so the card matches the approved design. // ========================================================= function pgApplyTxStageLayout(){ try{ if(window.innerWidth > 520) return; const overlay = document.getElementById('pg-tx-overlay'); const title = document.getElementById('pg-tx-title'); const card = document.getElementById('pg-tx-pending-card'); const row = card ? card.querySelector('.pg-wc-assets-row.pg-tx-assets-row') : null; const grid = card ? card.querySelector('.pg-tx-pending-grid') : null; const copy = card ? card.querySelector('.pg-tx-pending-copy') : null; const values = card ? card.querySelector('.pg-tx-pending-values') : null; const rewardsMain = document.getElementById('pg-tx-rewards-main'); const rewardsSub = document.getElementById('pg-tx-rewards-sub'); const paidLogo = document.getElementById('pg-tx-asset-paid-logo'); const rewardLogo = document.getElementById('pg-tx-asset-reward-logo'); const lockSvg = card ? card.querySelector('.pg-tx-asset-lock svg') : null; const meta = document.getElementById('pg-crypto-meta'); const isComplete = !!(meta && meta.classList.contains('is-tx-complete')); function pgEnsureTxStepLabel(tile, main, sub){ try{ if(!tile) return; var label = tile.querySelector(':scope > .pg-tx-step-label'); if(!label){ label = document.createElement('span'); label.className = 'pg-tx-step-label'; label.setAttribute('aria-hidden','true'); tile.appendChild(label); } label.innerHTML = ''; var m = label.querySelector('.pg-tx-step-label-main'); var b = label.querySelector('.pg-tx-step-label-sub'); if(m) m.textContent = main || ''; if(b) b.textContent = sub || ''; }catch(e){} } function pgTxActiveAssetCode(){ try{ var paidTile = document.querySelector('#pg-tx-overlay .pg-tx-asset-paid'); var v = paidTile ? (paidTile.getAttribute('data-tx-asset-label') || '') : ''; if(v) return String(v).toUpperCase().trim(); }catch(e){} try{ var activePill = document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active, #pg-asset-row .pg-asset-pill.is-active, #pg-asset-row .pg-asset-pill[aria-selected="true"]'); var data = activePill ? (activePill.getAttribute('data-asset') || (activePill.dataset && activePill.dataset.asset) || '') : ''; if(data) return String(data).toUpperCase().trim(); var label = activePill ? activePill.querySelector('.pg-asset-label-main') : null; if(label && label.textContent) return String(label.textContent).toUpperCase().trim(); }catch(e){} return 'ETH'; } if(!overlay || !card || overlay.getAttribute('aria-hidden') === 'true' || overlay.style.display === 'none') return; if(meta){ meta.style.setProperty('height','216px','important'); meta.style.setProperty('overflow','visible','important'); } overlay.style.setProperty('top','40px','important'); overlay.style.setProperty('bottom','auto','important'); overlay.style.setProperty('height','176px','important'); overlay.style.setProperty('overflow','visible','important'); if(title){ title.style.setProperty('display','block','important'); title.style.setProperty('width','100%','important'); title.style.setProperty('max-width','none','important'); title.style.setProperty('white-space','nowrap','important'); title.style.setProperty('overflow','visible','important'); title.style.setProperty('font-size','16px','important'); title.style.setProperty('font-weight','650','important'); title.style.setProperty('letter-spacing','-0.022em','important'); title.style.setProperty('line-height','1.03','important'); title.style.setProperty('text-align','center','important'); title.style.setProperty('margin','0 0 14px 0','important'); title.style.setProperty('text-transform','none','important'); title.textContent = isComplete ? 'Payment Complete' : 'Processing Payment'; } card.style.setProperty('display','block','important'); card.style.setProperty('width','100%','important'); card.style.setProperty('max-width','none','important'); card.style.setProperty('min-width','0','important'); card.style.setProperty('box-sizing','border-box','important'); card.style.setProperty('padding','6px 14px 10px','important'); card.style.setProperty('margin-top','0','important'); card.style.setProperty('min-height','134px','important'); card.style.setProperty('overflow','visible','important'); if(row){ row.style.setProperty('position','relative','important'); row.style.setProperty('display','flex','important'); row.style.setProperty('justify-content','space-between','important'); row.style.setProperty('align-items','flex-start','important'); row.style.setProperty('left','50%','important'); row.style.setProperty('width','230px','important'); row.style.setProperty('max-width','230px','important'); row.style.setProperty('min-width','230px','important'); row.style.setProperty('height','82px','important'); row.style.setProperty('gap','0','important'); row.style.setProperty('margin','0','important'); row.style.setProperty('padding','0','important'); row.style.setProperty('transform','translateX(-50%)','important'); row.style.setProperty('overflow','visible','important'); Array.from(row.children).forEach(function(el){ if(!el || el.classList.contains('pg-wc-flow-beam')) return; el.style.setProperty('width','54px','important'); el.style.setProperty('height','54px','important'); el.style.setProperty('flex','0 0 54px','important'); el.style.setProperty('min-width','54px','important'); el.style.setProperty('min-height','54px','important'); el.style.setProperty('border-radius','14px','important'); el.style.setProperty('position','relative','important'); el.style.setProperty('display','flex','important'); el.style.setProperty('align-items','center','important'); el.style.setProperty('justify-content','center','important'); el.style.setProperty('opacity','1','important'); el.style.setProperty('visibility','visible','important'); }); const beam = row.querySelector('.pg-wc-flow-beam'); if(beam){ beam.style.setProperty('height','18px','important'); beam.style.setProperty('left','8%','important'); beam.style.setProperty('width','84%','important'); beam.style.setProperty('opacity', isComplete ? '0' : '0.28','important'); } } try{ var paidTile = row ? row.querySelector('.pg-tx-asset-paid') : null; var lockTile = row ? row.querySelector('.pg-tx-asset-lock') : null; var rewardTile = row ? row.querySelector('.pg-tx-asset-reward') : null; var assetCode = pgTxActiveAssetCode(); pgEnsureTxStepLabel(paidTile, assetCode, 'Asset'); pgEnsureTxStepLabel(lockTile, isComplete ? 'Confirmed' : 'Processing', isComplete ? 'Secured' : 'Verifying'); pgEnsureTxStepLabel(rewardTile, 'ZLNC', isComplete ? 'Completed' : 'Pending'); if(paidLogo && (!paidLogo.getAttribute('src') || !String(paidLogo.getAttribute('src')).trim())){ var logoMap = { BTC:'https://irp.cdn-website.com/630a36f4/dms3rep/multi/BTC.png', ETH:'https://irp.cdn-website.com/630a36f4/dms3rep/multi/ETH.png', USDT:'https://irp.cdn-website.com/630a36f4/dms3rep/multi/USDT.png', XRP:'https://irp.cdn-website.com/630a36f4/dms3rep/multi/XRP.png', BNB:'https://irp.cdn-website.com/630a36f4/dms3rep/multi/BNB.png', SOL:'https://irp.cdn-website.com/630a36f4/dms3rep/multi/SOL.png' }; var fallbackLogo = logoMap[assetCode] || logoMap.ETH; paidLogo.setAttribute('src', fallbackLogo); paidLogo.src = fallbackLogo; } }catch(e){} if(grid){ grid.style.setProperty('display','grid','important'); grid.style.setProperty('grid-template-columns','1fr','important'); grid.style.setProperty('align-items','center','important'); grid.style.setProperty('justify-items','center','important'); grid.style.setProperty('gap','0','important'); grid.style.setProperty('margin-top','34px','important'); grid.style.setProperty('width','100%','important'); } if(copy){ copy.textContent = ''; copy.setAttribute('aria-hidden','true'); copy.style.setProperty('display','none','important'); } if(values){ values.style.setProperty('text-align','center','important'); values.style.setProperty('min-width','0','important'); values.style.setProperty('align-self','center','important'); values.style.setProperty('justify-self','center','important'); values.style.setProperty('opacity', isComplete ? '1' : '0.56','important'); } if(rewardsMain){ rewardsMain.style.setProperty('font-size','19px','important'); rewardsMain.style.setProperty('font-weight','820','important'); rewardsMain.style.setProperty('line-height','1.02','important'); rewardsMain.style.setProperty('white-space','nowrap','important'); rewardsMain.style.setProperty('text-align','center','important'); rewardsMain.style.setProperty('transform','none','important'); rewardsMain.style.setProperty('letter-spacing','-0.02em','important'); rewardsMain.style.setProperty('color','rgba(255,255,255,0.98)','important'); } if(rewardsSub){ rewardsSub.style.setProperty('margin-top','4px','important'); rewardsSub.style.setProperty('font-size','13px','important'); rewardsSub.style.setProperty('font-weight','520','important'); rewardsSub.style.setProperty('line-height','1.08','important'); rewardsSub.style.setProperty('white-space','nowrap','important'); rewardsSub.style.setProperty('text-align','center','important'); rewardsSub.style.setProperty('transform','none','important'); rewardsSub.style.setProperty('color','rgba(255,255,255,0.82)','important'); } if(paidLogo){ paidLogo.style.setProperty('display','block','important'); paidLogo.style.setProperty('opacity','1','important'); paidLogo.style.setProperty('visibility','visible','important'); paidLogo.style.setProperty('width','32px','important'); paidLogo.style.setProperty('height','32px','important'); paidLogo.style.setProperty('object-fit','contain','important'); } if(rewardLogo){ rewardLogo.style.setProperty('display','block','important'); rewardLogo.style.setProperty('opacity','1','important'); rewardLogo.style.setProperty('visibility','visible','important'); rewardLogo.style.setProperty('width','27px','important'); rewardLogo.style.setProperty('height','27px','important'); rewardLogo.style.setProperty('object-fit','contain','important'); } if(lockSvg){ lockSvg.style.setProperty('width','22px','important'); lockSvg.style.setProperty('height','22px','important'); } }catch(e){} } try{ window.pgApplyTxStageLayout = pgApplyTxStageLayout; }catch(_e){} try{ const txOverlayLayoutObserver = new MutationObserver(function(){ try{ requestAnimationFrame(function(){ pgApplyTxStageLayout(); }); }catch(e){} }); if(txOverlay) txOverlayLayoutObserver.observe(txOverlay, { attributes:true, attributeFilter:['style','aria-hidden','class'] }); if(metaCard) txOverlayLayoutObserver.observe(metaCard, { attributes:true, attributeFilter:['class'] }); }catch(e){} try{ window.addEventListener('resize', function(){ try{ pgApplyTxStageLayout(); }catch(e){} }, { passive:true }); }catch(e){} function pgEnsureTxAssetRingClone(){ try{ const symbol = document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol'); if(!symbol) return; let aura = symbol.querySelector(':scope > .pg-tx-ring-aura'); let ring = symbol.querySelector(':scope > .pg-tx-ring-clone'); if(!aura){ aura = document.createElement('span'); aura.className = 'pg-tx-ring-aura'; aura.setAttribute('aria-hidden','true'); symbol.insertBefore(aura, symbol.firstChild || null); } if(!ring){ ring = document.createElement('span'); ring.className = 'pg-tx-ring-clone'; ring.setAttribute('aria-hidden','true'); symbol.insertBefore(ring, symbol.firstChild || null); } }catch(e){} } function pgClearTxAssetRingClone(){ try{ document.querySelectorAll('#pg-asset-row .pg-tx-ring-clone, #pg-asset-row .pg-tx-ring-aura').forEach(el=>el.remove()); }catch(e){} } function pgEnsureTxCompleteCheck(){ try{ const symbol = document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol'); if(!symbol) return null; try{ symbol.querySelectorAll(':scope > .pg-tx-complete-checkplate').forEach(function(el){ el.remove(); }); }catch(e){} let check = symbol.querySelector(':scope > .pg-hero-order-complete-checkmark'); if(!check){ check = document.createElement('img'); check.className = 'pg-hero-order-complete-checkmark'; check.setAttribute('aria-hidden','true'); check.setAttribute('alt',''); check.setAttribute('decoding','async'); check.setAttribute('src','https://irp.cdn-website.com/630a36f4/dms3rep/multi/0rder-Complete-Checkmark.png'); symbol.appendChild(check); } return check; }catch(e){ return null; } } function pgClearTxCompleteCheck(){ try{ document.querySelectorAll('#pg-asset-row .pg-hero-order-complete-checkmark, #pg-asset-row .pg-tx-complete-checkplate').forEach(el=>el.remove()); }catch(e){} } function pgGetTxCompleteCoinStyle(asset){ const s = String(asset || '').toUpperCase().trim(); const map = { BTC: 'radial-gradient(circle at 35% 28%, #f6ba59 0%, #f0a640 54%, #d88411 100%)', ETH: 'radial-gradient(circle at 35% 28%, #bdbdbd 0%, #9d9d9d 54%, #7a7a7a 100%)', USDT: 'radial-gradient(circle at 35% 28%, #42d492 0%, #1eb980 54%, #12996a 100%)', XRP: 'radial-gradient(circle at 35% 28%, #757575 0%, #4d4d4d 54%, #2e2e2e 100%)', BNB: 'radial-gradient(circle at 35% 28%, #f6d360 0%, #e6b93c 54%, #bf8f13 100%)', ZLNC: 'radial-gradient(circle at 35% 28%, #2bffda 0%, #00d5b8 54%, #009b87 100%)' }; return map[s] || map.ETH; } function pgSwapCompleteLabelToCompleted(){ try{ const label = pgGetActiveAssetSubLabel(); if(!label) return; if(label.dataset && !Object.prototype.hasOwnProperty.call(label.dataset,'txCompleteOrigText')){ label.dataset.txCompleteOrigText = label.textContent || ''; } if(txRoot) txRoot.classList.add('pg-tx-complete-label-active'); label.classList.add('is-tx-complete-swapping'); setTimeout(function(){ try{ label.textContent = 'COMPLETED'; label.classList.remove('is-tx-complete-swapping'); }catch(e){} }, 170); }catch(e){} } function pgRestoreCompleteLabel(){ try{ const label = pgGetActiveAssetSubLabel(); if(label){ if(label.dataset && Object.prototype.hasOwnProperty.call(label.dataset,'txCompleteOrigText')){ label.textContent = label.dataset.txCompleteOrigText || ''; delete label.dataset.txCompleteOrigText; } label.classList.remove('is-tx-complete-swapping'); } if(txRoot) txRoot.classList.remove('pg-tx-complete-label-active'); }catch(e){} } function pgStartTxCompleteHero(){ try{ const activePill = document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active, #pg-asset-row .pg-asset-pill.is-active, #pg-asset-row .pg-asset-pill[aria-selected="true"]'); const activeAsset = (activePill && (activePill.getAttribute('data-asset') || (activePill.dataset && activePill.dataset.asset))) ? String(activePill.getAttribute('data-asset') || activePill.dataset.asset).toUpperCase().trim() : ((state && state.selectedAsset) ? String(state.selectedAsset).toUpperCase().trim() : 'ETH'); const symbol = activePill ? activePill.querySelector('.pg-asset-symbol') : null; const logo = symbol ? symbol.querySelector(':scope > img.pg-asset-logo') : null; const check = pgEnsureTxCompleteCheck(); if(txRoot){ txRoot.classList.remove('pg-tx-asset-ring-active'); txRoot.classList.add('pg-tx-asset-ring-freeze'); txRoot.classList.add('pg-tx-complete-hero'); txRoot.classList.add('pg-hero-order-complete-prep'); txRoot.classList.remove('is-tx-complete-logo-swapping'); } try{ if(symbol){ symbol.style.position = 'relative'; symbol.style.overflow = 'visible'; symbol.style.isolation = 'isolate'; } if(logo){ logo.style.position = 'absolute'; logo.style.left = '50%'; logo.style.top = '50%'; logo.style.width = '48px'; logo.style.height = '48px'; logo.style.maxWidth = 'none'; logo.style.minWidth = '0'; logo.style.objectFit = 'contain'; logo.style.display = 'block'; logo.style.flex = 'none'; logo.style.flexShrink = '0'; logo.style.margin = '0'; logo.style.zIndex = '3'; logo.style.pointerEvents = 'none'; logo.style.transform = 'translate(-50%,-50%)'; logo.style.transformOrigin = '50% 50%'; logo.style.opacity = '1'; logo.style.filter = 'none'; logo.style.transition = 'opacity .20s ease, filter .20s ease'; } if(check){ check.style.position = 'absolute'; check.style.left = '50%'; check.style.top = '50%'; check.style.width = '91px'; check.style.height = '69px'; check.style.maxWidth = 'none'; check.style.minWidth = '0'; check.style.objectFit = 'contain'; check.style.display = 'block'; check.style.flex = 'none'; check.style.flexShrink = '0'; check.style.margin = '0'; check.style.zIndex = '4'; check.style.pointerEvents = 'none'; check.style.opacity = '0'; check.style.transform = 'translate(-50%,-50%)'; check.style.transformOrigin = '50% 50%'; check.style.filter = 'blur(0.35px) drop-shadow(0 0 8px rgba(255,255,255,0.18))'; check.style.transition = 'opacity .16s ease, filter .20s ease'; } if(symbol) void symbol.offsetWidth; }catch(e){} pgSwapCompleteLabelToCompleted(); requestAnimationFrame(function(){ requestAnimationFrame(function(){ try{ if(txRoot) txRoot.classList.add('is-tx-complete-logo-swapping'); if(logo){ logo.style.setProperty('opacity','0','important'); logo.style.setProperty('filter','blur(0.35px)','important'); } if(check){ check.style.setProperty('opacity','1','important'); check.style.setProperty('filter','drop-shadow(0 0 8px rgba(255,255,255,0.18))','important'); } }catch(e){} }); }); try{ if(window.pgInstorePay && typeof window.pgInstorePay.forcePosOnly === 'function'){ window.pgInstorePay.forcePosOnly({ source: 'live-complete-hero' }); } }catch(e){ try{ console.warn('[ZELEN] live complete hero -> forcePosOnly failed', e); }catch(_e){} } }catch(e){} } function pgClearTxCompleteHero(){ try{ if(txRoot) txRoot.classList.remove('pg-tx-complete-hero','pg-hero-order-complete-prep','is-tx-complete-logo-swapping','pg-tx-asset-ring-freeze'); }catch(e){} try{ const logo = document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol > img.pg-asset-logo'); const symbol = document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active .pg-asset-symbol'); if(symbol){ symbol.style.position = ''; symbol.style.overflow = ''; symbol.style.isolation = ''; } if(logo){ logo.style.position = ''; logo.style.left = ''; logo.style.top = ''; logo.style.width = ''; logo.style.height = ''; logo.style.maxWidth = ''; logo.style.minWidth = ''; logo.style.objectFit = ''; logo.style.display = ''; logo.style.flex = ''; logo.style.flexShrink = ''; logo.style.margin = ''; logo.style.zIndex = ''; logo.style.pointerEvents = ''; logo.style.transform = ''; logo.style.transformOrigin = ''; logo.style.transition = ''; logo.style.removeProperty('opacity'); logo.style.removeProperty('filter'); } const check = symbol ? symbol.querySelector(':scope > img.pg-hero-order-complete-checkmark') : null; if(check){ check.style.position = ''; check.style.left = ''; check.style.top = ''; check.style.width = ''; check.style.height = ''; check.style.maxWidth = ''; check.style.minWidth = ''; check.style.objectFit = ''; check.style.display = ''; check.style.flex = ''; check.style.flexShrink = ''; check.style.margin = ''; check.style.zIndex = ''; check.style.pointerEvents = ''; check.style.transform = ''; check.style.transformOrigin = ''; check.style.transition = ''; check.style.removeProperty('opacity'); check.style.removeProperty('filter'); } }catch(e){} try{ pgRestoreCompleteLabel(); }catch(e){} try{ pgClearTxCompleteCheck(); }catch(e){} } // ========================================================= // TX Overlay: HARD HIDE underlying meta children (mobile) // This prevents any "meta bleed" regardless of z-index / stacking. // We ONLY toggle inline styles on direct children of #pg-crypto-meta, // and we restore them when clearing TX state. // ========================================================= function setTxHideUnderlying(on){ if(!metaCard) return; const kids = Array.from(metaCard.children || []); for(const el of kids){ if(!el || el === txOverlay || el.id === 'pg-tx-overlay' || el.classList.contains('pg-tx-overlay')) continue; if(on){ if(el.dataset && el.dataset.txHidden === '1') continue; if(el.dataset){ el.dataset.txHidden = '1'; el.dataset.txPrevDisplay = el.style.display || ''; el.dataset.txPrevVisibility = el.style.visibility || ''; el.dataset.txPrevOpacity = el.style.opacity || ''; } el.style.display = 'none'; el.style.visibility = 'hidden'; el.style.opacity = '0'; el.style.pointerEvents = 'none'; }else{ if(!(el.dataset && el.dataset.txHidden === '1')) continue; const prevD = el.dataset.txPrevDisplay || ''; const prevV = el.dataset.txPrevVisibility || ''; const prevO = el.dataset.txPrevOpacity || ''; el.style.display = prevD; el.style.visibility = prevV; el.style.opacity = prevO; el.style.pointerEvents = ''; delete el.dataset.txHidden; delete el.dataset.txPrevDisplay; delete el.dataset.txPrevVisibility; delete el.dataset.txPrevOpacity; } } } function clearTxState(){ setTxHideUnderlying(false); metaCard.classList.remove('is-tx-pending','is-tx-complete'); try{ if(txRoot) txRoot.classList.remove('pg-tx-asset-ring-active'); }catch(e){} try{ pgClearTxCompleteHero(); }catch(e){} try{ pgClearTxAssetRingClone(); }catch(e){} try{ pgStopTxCountdown(); }catch(e){} try{ pgClearPendingFlowClasses(); }catch(e){} if(txOverlay){ txOverlay.setAttribute('aria-hidden','true'); txOverlay.style.display = 'none'; txOverlay.style.opacity = '0'; } if(txSub){ txSub.style.display = 'none'; } } function showTxPending(){ // If Apply Rewards keypad overlay is open, close it before showing TX state try{ if(typeof closeRewardsAmountOverlay === 'function') closeRewardsAmountOverlay(true); }catch(e){} // LOCK total at the exact Pay button amount (prevents reverting to base during TX) try{ const line1 = document.querySelector('#pg-hybredpayment-hero .pg-hph-right .pg-hph-line1'); const raw = line1 ? (line1.textContent || '') : ''; const num = parseFloat(String(raw).replace(/[^0-9.]/g,'')); if(Number.isFinite(num)) window.pgLockedTotalUSD = num; }catch(e){} // Force the Pay button label to the locked value while pending is active try{ if(Number.isFinite(window.pgLockedTotalUSD)){ const line1 = document.querySelector('#pg-hybredpayment-hero .pg-hph-right .pg-hph-line1'); if(line1) line1.textContent = 'Pay $' + window.pgLockedTotalUSD.toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}); } }catch(e){} // Ensure we are in the standard expanded meta state closeApplyRewards(); metaCard.classList.remove('is-ar-open'); metaCard.classList.add('is-ad-open'); clearTxState(); metaCard.classList.add('is-tx-pending'); try{ pgEnsureTxAssetRingClone(); }catch(e){} try{ pgEnsureTxAssetRingClone(); }catch(e){} try{ if(txRoot) txRoot.classList.add('pg-tx-asset-ring-active'); }catch(e){} try{ pgStartTxCountdown(); }catch(e){} try{ pgSetTxPendingData(); }catch(e){} try{ pgStartPendingFlow(); }catch(e){} setTxHideUnderlying(true); if(txTitle) txTitle.textContent = 'Processing Payment'; if(txSub) txSub.style.display = 'none'; // pending card carries the supporting info if(txOverlay){ txOverlay.setAttribute('aria-hidden','false'); txOverlay.style.display = 'flex'; // fade in (CSS has transition) requestAnimationFrame(()=>{ txOverlay.style.opacity = '1'; }); } } function showTxComplete(payload){ try{ window.pgLastTxCompletePayload = payload || null; }catch(e){} // If Apply Rewards keypad overlay is open, close it before showing TX state try{ if(typeof closeRewardsAmountOverlay === 'function') closeRewardsAmountOverlay(true); }catch(e){} closeApplyRewards(); metaCard.classList.remove('is-ar-open'); metaCard.classList.add('is-ad-open'); clearTxState(); metaCard.classList.add('is-tx-complete'); try{ pgEnsureTxAssetRingClone(); }catch(e){} try{ pgStopTxCountdown(); }catch(e){} try{ pgSetTxPendingData(); }catch(e){} try{ pgScheduleMobileTxRewardValueSync(payload && (payload.total || payload.amount || payload.amount_paid_usd || payload.amountPaidUsd)); }catch(e){} try{ pgStartTxCompleteHero(); }catch(e){} setTxHideUnderlying(true); if(txTitle) txTitle.textContent = 'Payment Complete'; if(txSub) txSub.style.display = 'none'; // keep minimal for now try{ const copy = document.querySelector('#pg-tx-pending-card .pg-tx-pending-copy'); if(copy){ copy.textContent = ''; copy.setAttribute('aria-hidden','true'); } }catch(e){} if(txOverlay){ txOverlay.setAttribute('aria-hidden','false'); txOverlay.style.display = 'flex'; requestAnimationFrame(function(){ try{ txOverlay.style.opacity = '1'; }catch(e){} try{ pgApplyTxStageLayout(); }catch(e){} requestAnimationFrame(function(){ try{ pgStartCompleteFlow(); }catch(e){} }); }); }else{ try{ pgApplyTxStageLayout(); }catch(e){} try{ pgStartCompleteFlow(); }catch(e){} } } // Expose helpers for Radom polling step (next phase) try{ window.pgTxOverlay = { pending: showTxPending, complete: function(payload){ try{ window.pgLastTxCompletePayload = payload || window.pgLastTxCompletePayload || null; }catch(e){} var result = showTxComplete(payload); try{ pgScheduleMobileTxRewardValueSync(payload && (payload.total || payload.amount || payload.amount_paid_usd || payload.amountPaidUsd)); }catch(e){} return result; }, clear: clearTxState }; }catch(_){} // Start hidden / inactive // ============================ // MOBILE: Pending -> Radom Session -> Deep Link Wallet (no QR scan) // ============================ let pgMobileRadomInFlight = false; let pgMobileRadomPollTimer = null; function pgMobileStopPoll(){ if(pgMobileRadomPollTimer) clearInterval(pgMobileRadomPollTimer); pgMobileRadomPollTimer = null; } function pgMobileGetSelectedAsset(){ // Prefer active carousel pill const active = document.querySelector('#pg-asset-row .pg-asset-pill.pg-asset-active, #pg-asset-row .pg-asset-pill.is-active, #pg-asset-row .pg-asset-pill[aria-selected="true"]'); const a = active && (active.getAttribute('data-asset') || active.dataset && active.dataset.asset); if(a) return String(a).toUpperCase(); // Fallback to global state if present try{ if(window.state && window.state.asset) return String(window.state.asset).toUpperCase(); }catch(e){} return 'BTC'; } function pgMobileGetTotalUsd(){ // Prefer locked total if set by pay click (prevents restore-to-base regressions) const locked = (typeof window.pgLockedTotalUSD === "number") ? window.pgLockedTotalUSD : parseFloat(String(window.pgLockedTotalUSD || "").replace(/[^0-9.]/g,'')); if(Number.isFinite(locked) && locked > 0) return locked; const el = document.getElementById('pg-order-total-display') || document.querySelector('.pg-meta-total-amount'); const t = el ? (el.textContent || '') : ''; const n = parseFloat(String(t).replace(/[^0-9.]/g,'')); return (Number.isFinite(n) && n >= 0) ? n : 0; } function pgMobileOpenWalletUri(uri){ if(!uri) return; try{ // Use _self to allow OS to handoff to installed wallet window.location.href = uri; }catch(e){ try{ window.open(uri, '_self'); }catch(_){} } } function pgMobileIsSuccessStatus(s){ const v = String(s || '').toLowerCase(); return v.includes('paid') || v.includes('complete') || v.includes('success') || v.includes('confirmed') || v.includes('finished'); } function pgMobileIsFailedStatus(s){ const v = String(s || '').toLowerCase(); return v.includes('fail') || v.includes('expired') || v.includes('cancel'); } function pgMobileHandleWebhookComplete(sessionId, payload){ stopMobileWebhookStatusPolling(); pgMobileStopPoll(); pgMobileRadomInFlight = false; try{ window.pgLastWebhookCompletionPayload = payload || null; }catch(e){} showTxComplete(payload || { session_id: sessionId || "" }); } function startMobileCompletionWatch(sessionId, api){ stopMobileWebhookStatusPolling(); const fallbackStartsAt = Date.now() + RADOM_FALLBACK_DELAY_MS; pgMobileWebhookPollTimer = setInterval(async () => { try{ const payload = await fetchWebhookCompletionStatus(sessionId); if (!payload) return; const webhookSessionId = pgExtractWebhookSessionId(payload); if (webhookSessionId && webhookSessionId !== String(sessionId || "")) return; const webhookStatus = pgExtractWebhookCompletionStatus(payload); if (!webhookStatus) return; if (pgWebhookIsSuccessStatus(webhookStatus)) { pgMobileHandleWebhookComplete(sessionId, payload); return; } if (pgWebhookIsFailedStatus(webhookStatus)) { stopMobileWebhookStatusPolling(); } }catch(_e){} }, WEBHOOK_STATUS_POLL_INTERVAL_MS); if(sessionId && api && typeof api.getPaymentSessionRadom === 'function'){ pgMobileRadomPollTimer = setInterval(async () => { if(Date.now() < fallbackStartsAt) return; try{ const s = await api.getPaymentSessionRadom(sessionId); const st = s && s.sessionStatus ? s.sessionStatus : ''; if(pgMobileIsSuccessStatus(st)){ stopMobileWebhookStatusPolling(); pgMobileStopPoll(); pgMobileRadomInFlight = false; showTxComplete(s || { session_id: sessionId || "" }); }else if(pgMobileIsFailedStatus(st)){ stopMobileWebhookStatusPolling(); pgMobileStopPoll(); pgMobileRadomInFlight = false; } }catch(_e){} }, 2500); } } function startMobileRadomFlow(){ if(!isMobile()) return; if(pgMobileRadomInFlight) return; const api = window.pgRadomApi; if(!api || typeof api.createPaymentSessionRadom !== 'function') return; pgMobileRadomInFlight = true; try{ window.pgLastMobilePaymentUri = ''; }catch(e){} pgMobileStopPoll(); // STEP 1217 — MOBILE ONLY: instant wallet selector display. // Show the finalized wallet selector immediately on Pay click, while the // Radom payment session/payload is generated behind it. The selected wallet // will only launch after the real Radom payment payload exists. // No Radom/API/rewards/receipt/completion logic is changed. window.setTimeout(async () => { try{ const asset = pgMobileGetSelectedAsset(); const totalUsd = pgMobileGetTotalUsd(); try{ const preparingPacket = { asset: asset, totalUsd: totalUsd, isPreparingPayment: true, direct_deeplink_only: true }; if(window.pgPayWalletSelector && typeof window.pgPayWalletSelector.open === 'function'){ window.pgPayWalletSelector.open(preparingPacket); }else if(typeof window.__pgOpenPayWalletSelector === 'function'){ window.__pgOpenPayWalletSelector(preparingPacket); } }catch(_instantSelectorErr){} try{ if(typeof pgFreezeReceiptRelayData === 'function') pgFreezeReceiptRelayData(totalUsd, asset); }catch(_receiptFreezeErr){} const session = await api.createPaymentSessionRadom({ totalUsd, asset }); try{ const mobileSeedFn = (api && typeof api.seedReceiptInit === 'function') ? api.seedReceiptInit : (typeof window.seedReceiptInit === 'function' ? window.seedReceiptInit : null); if(mobileSeedFn){ await mobileSeedFn({ session, asset, totalUsd }); } }catch(_receiptSeedErr){} const mapped = (api.mapAssetToRadomNetwork ? api.mapAssetToRadomNetwork(asset) : { network:'bitcoin', symbol:asset }); const network = (session && session.method && session.method.network) ? session.method.network : mapped.network; const addr = session && session.paymentAddress ? session.paymentAddress : ''; const paymentTotalExact = (session && session.paymentTotal != null) ? String(session.paymentTotal) : ''; const amountWei = (['ethereum','base','polygon','avalanche'].includes(String(network).toLowerCase()) && typeof api.decimalToBaseUnits === 'function') ? api.decimalToBaseUnits(paymentTotalExact, 18) : ((String(network).toLowerCase() === 'ethereum' && api.ethToWeiString) ? api.ethToWeiString(paymentTotalExact) : ''); const uri = (api.buildPaymentUri ? api.buildPaymentUri(network, addr, amountWei, { amountExact: paymentTotalExact, token: (session && session.method && session.method.token) ? session.method.token : (mapped && mapped.token ? mapped.token : '') }) : addr); try{ window.pgLastMobilePaymentUri = uri || ''; }catch(_uriStoreErr){} const sessionId = session && session.id ? String(session.id) : ''; if(sessionId && typeof api.getPaymentSessionRadom === 'function'){ pgMobileRadomPollTimer = setInterval(async () => { try{ const s = await api.getPaymentSessionRadom(sessionId); const st = s && s.sessionStatus ? s.sessionStatus : ''; if(pgMobileIsSuccessStatus(st)){ pgMobileStopPoll(); pgMobileRadomInFlight = false; showTxComplete(); }else if(pgMobileIsFailedStatus(st)){ // For now, just stop polling and leave Pending visible (we can add a fail state later) pgMobileStopPoll(); pgMobileRadomInFlight = false; } }catch(_e){} }, 2500); } const launchPacket = { asset: asset, totalUsd: totalUsd, session: session, sessionId: sessionId, network: network, address: addr, paymentAddress: addr, paymentTotal: paymentTotalExact, paymentTotalExact: paymentTotalExact, amountWei: amountWei, uri: uri, token: (session && session.method && session.method.token) ? session.method.token : (mapped && mapped.token ? mapped.token : ''), mapped: mapped }; try{ window.pgLastMobileWalletLaunchPacket = launchPacket; }catch(_packetErr){} // STEP 1203 — MOBILE PAYMENT WALLET SELECTOR RESTORE // Keep the Step 1202 proven Radom/payment payload as the source of truth, // but restore the finalized Step 1201 payment wallet selector UI. // IMPORTANT: // - Payment wallet selection must NOT route to app/download links. // - WalletConnect is used only for wallet metadata/logos/search where available. // - The clicked payment wallet tile launches the exact same solved payload URI // that completed successfully in Step 1202. // - If the selector is unavailable for any reason, fall back to direct native // OS wallet handoff using the same payload. if(window.pgPayWalletSelector && typeof window.pgPayWalletSelector.open === 'function'){ window.pgPayWalletSelector.open(launchPacket); }else if(typeof window.__pgOpenPayWalletSelector === 'function'){ window.__pgOpenPayWalletSelector(launchPacket); }else{ pgMobileOpenWalletUri(uri); } }catch(e){ pgMobileRadomInFlight = false; } }, 0); } try{ window.__pgMobileRadomReset = function(opts){ try{ stopMobileWebhookStatusPolling(); }catch(_e){} try{ pgMobileStopPoll(); }catch(_e){} try{ stopRadomPolling(); }catch(_e){} try{ stopRadomExpiryTimer(); }catch(_e){} try{ activeRadomSessionId = null; }catch(_e){} try{ pgMobileRadomInFlight = false; }catch(_e){} try{ window.activeRadomSessionId = null; }catch(_e){} try{ window.pgLastMobilePaymentUri = ''; }catch(_e){} try{ window.pgLastWebhookCompletionPayload = null; }catch(_e){} try{ window.pgLastMobileCancelledAt = Date.now(); }catch(_e){} try{ window.pgRadomSession = null; }catch(_e){} try{ window.pgPaymentSession = null; }catch(_e){} try{ window.pgCurrentPaymentSession = null; }catch(_e){} try{ window.pgActivePaymentSession = null; }catch(_e){} try{ window.pgRadomPaymentSession = null; }catch(_e){} try{ if(window.pgRadomApi){ if('lastSession' in window.pgRadomApi) window.pgRadomApi.lastSession = null; if('_lastSession' in window.pgRadomApi) window.pgRadomApi._lastSession = null; if('currentSession' in window.pgRadomApi) window.pgRadomApi.currentSession = null; if('_currentSession' in window.pgRadomApi) window.pgRadomApi._currentSession = null; } }catch(_e){} try{ if(typeof window.__pgRestoreBaseState === 'function'){ window.__pgRestoreBaseState(); } }catch(_e){} try{ if(modalRoot) modalRoot.classList.remove('pg-wallet-view-active'); if(modalQrImg){ modalQrImg.classList.remove('pg-wallet-qr'); modalQrImg.removeAttribute('src'); modalQrImg.src = TRANSPARENT_GIF; } }catch(_e){} try{ if(opts && opts.clearTx === true && window.pgTxOverlay && typeof window.pgTxOverlay.clear === 'function'){ window.pgTxOverlay.clear(); } }catch(_e){} return true; }; }catch(_e){} clearTxState(); // Defensive: ensure no persisted classes/show-state sneaks in on initial paint setTimeout(()=>{ try{ clearTxState(); }catch(e){} }, 0); function syncApplyRewardsDisplay(){ try{ const rwUsdLive = document.getElementById('pg-rw-usd') || rwUsd; const rwPriceLive = document.getElementById('pg-rw-price') || rwPrice; if(arPrice && rwPriceLive){ const priceTxt = (rwPriceLive.textContent || '').trim(); arPrice.textContent = priceTxt || '$0.0375'; } if(arUsd && rwUsdLive){ const raw = (rwUsdLive.textContent || '').trim(); const clean = raw.replace(/[^0-9.]+/g,''); arUsd.textContent = clean ? ('$' + clean) : '$0.00'; } }catch(_e){} } function openApplyRewards(){ // Ensure Asset Data is collapsed before opening Apply Rewards closeAssetData(); // sync display values from the live rewards drawer every time syncApplyRewardsDisplay(); // reset switch OFF on each entry setSwitch(false, true); metaCard.classList.add('is-ar-open'); setArVisible(true); // Make sure the rewards drawer is closed for a clean state const rewardsCard = document.getElementById('pg-rewards-code'); if(rewardsCard) rewardsCard.classList.remove('is-code-open'); document.documentElement.classList.remove('pg-rw-open'); } try{ const rwUsdLive = document.getElementById('pg-rw-usd'); if(rwUsdLive && !rwUsdLive.__pgArMirrorBound){ rwUsdLive.__pgArMirrorBound = true; const mo = new MutationObserver(function(){ try{ syncApplyRewardsDisplay(); }catch(_e){} }); mo.observe(rwUsdLive, { childList:true, subtree:true, characterData:true }); } }catch(_e){} // Identify the Pay Now button EXACTLY (right-side of the hero hybrid control). function isPayNowBtn(el){ if(!el) return false; // The user-specified target is: button.pg-hph-side:nth-child(3) if(el.matches && el.matches('#pg-hybredpayment-hero button.pg-hph-side:nth-child(3)')) return true; // Fallbacks for DOM variations (still right-side only). if(!el.closest || !el.closest('#pg-hybredpayment-hero')) return false; if(!el.matches || !el.matches('button.pg-hph-side')) return false; // Prefer explicit right markers if present. if(el.classList.contains('pg-hph-right')) return true; if(el.getAttribute('data-side') === 'right') return true; // Last resort: match visible label text. const label = ((el.getAttribute('aria-label') || '') + ' ' + (el.textContent || '')).toLowerCase(); return label.includes('pay now') || (label.includes('pay') && label.includes('now')); } function isCardOrCancelBtn(el){ if(!el) return false; if(el.matches && el.matches('#pg-hybredpayment-hero button.pg-hph-side:nth-child(1)')) return true; if(!el.closest || !el.closest('#pg-hybredpayment-hero')) return false; if(!el.matches || !el.matches('button.pg-hph-side')) return false; if(el.classList.contains('pg-hph-left')) return true; if(el.getAttribute('data-side') === 'left') return true; const label = ((el.getAttribute('aria-label') || '') + ' ' + (el.textContent || '')).toLowerCase(); return label.includes('pay by card') || label.includes('use card') || label.includes('cancel') || label.includes('back'); } document.addEventListener('click', function(e){ if(!isMobile()) return; if(e && e.isTrusted === false) return; const btn = e.target && e.target.closest ? e.target.closest('#pg-hybredpayment-hero button.pg-hph-side') : null; if(!isCardOrCancelBtn(btn)) return; const rewardsOverlayOpen = document.documentElement.classList.contains('pg-ar-overlay-open') || document.documentElement.classList.contains('pg-ar-overlay-lock'); if(!rewardsOverlayOpen) return; e.preventDefault(); e.stopPropagation(); closeRewardsAmountOverlay(); clearTxState(); }, true); // Always use capture so we win even if other click handlers stop propagation. document.addEventListener('click', function(e){ if(!isMobile()) return; if(e && e.isTrusted === false) return; const btn = e.target && e.target.closest ? e.target.closest('#pg-hybredpayment-hero button.pg-hph-side') : null; if(!isPayNowBtn(btn)) return; e.preventDefault(); e.stopPropagation(); // Lock the EXACT total shown in the Pay button (ex: "Pay $0.01") so it cannot revert during Pending/Radom. try{ const state = (typeof pgArLockAppliedState === 'function') ? pgArLockAppliedState() : null; if(!(state && Number.isFinite(state.remainingOrder) && state.remainingOrder >= 0)){ const line1 = btn.querySelector('.pg-hph-line1') || btn; const rawPay = line1 ? (line1.textContent || '') : ''; const nPay = parseFloat(String(rawPay).replace(/[^0-9.]/g,'')); if(Number.isFinite(nPay) && nPay > 0){ window.pgLockedTotalUSD = nPay; } const rwTxt = rwUsd ? (rwUsd.textContent || '') : ''; const rwNow = parseFloat(String(rwTxt).replace(/[^0-9.]/g,'')); if(Number.isFinite(rwNow)) window.pgLockedRewardsBalanceUSD = rwNow; if(!Number.isFinite(Number(window.pgLockedRewardsAppliedUSD))) window.pgLockedRewardsAppliedUSD = 0; if(!Number.isFinite(Number(window.pgLockedRewardsSavedUSD))) window.pgLockedRewardsSavedUSD = Number(window.pgLockedRewardsAppliedUSD) || 0; } }catch(_){} // ========================================================= // PAY BUTTON FLOW (MOBILE) // 1) If user HAS rewards (>0), first click opens the rewards number entry overlay directly // 2) If user has NO rewards, OR the rewards number entry overlay is already open, // a Pay click proceeds to the TX Pending overlay. // ========================================================= const rewardsAvailable = numFrom(rwUsd) > 0; const rewardsOverlayOpen = document.documentElement.classList.contains('pg-ar-overlay-open') || document.documentElement.classList.contains('pg-ar-overlay-lock'); // Always clear any TX overlay before deciding what to show next clearTxState(); if(rewardsAvailable && !rewardsOverlayOpen){ // First pay click: bypass the inline Apply Rewards toggle and open the rewards number entry overlay directly. syncApplyRewardsDisplay(); openRewardsAmountOverlay(); return; } // Otherwise: proceed to pending overlay (inside #pg-crypto-meta) showTxPending(); startMobileRadomFlow(); }, true); // Start closed (safety) // Close behavior (no close button): tap anywhere on the Apply Rewards sheet (except the toggle), // or swipe UP on the sheet to dismiss. (function bindApplyRewardsDismiss(){ if(!arBody) return; // Tap-to-close (capture so it works even with nested handlers later) arBody.addEventListener('click', function(ev){ if(!isMobile()) return; if(!metaCard.classList.contains('is-ar-open')) return; const t = ev.target; // Never close when interacting with the toggle/switch if(t && t.closest && t.closest('#pg-ar-switch')) return; ev.preventDefault(); ev.stopPropagation(); closeApplyRewards(); }, true); // Swipe UP to close (simple, super-app feel) let startY = null; let moved = 0; function yFromEvent(e){ const t = e.touches && e.touches[0] ? e.touches[0] : e; return t.clientY || 0; } function onStart(e){ if(!isMobile()) return; if(!metaCard.classList.contains('is-ar-open')) return; // ignore if gesture starts on the switch const t = e.target; if(t && t.closest && t.closest('#pg-ar-switch')) return; startY = yFromEvent(e); moved = 0; } function onMove(e){ if(startY == null) return; const dy = yFromEvent(e) - startY; // dy < 0 => moving up moved = Math.min(0, dy); } function onEnd(){ if(startY == null) return; // Threshold: swipe up at least 60px if(moved <= -60){ closeApplyRewards(); } startY = null; moved = 0; } arBody.addEventListener('touchstart', onStart, {passive:true}); arBody.addEventListener('touchmove', onMove, {passive:true}); arBody.addEventListener('touchend', onEnd, {passive:true}); // Pointer events (covers non-touch pen/mouse) arBody.addEventListener('pointerdown', onStart, {passive:true}); arBody.addEventListener('pointermove', onMove, {passive:true}); arBody.addEventListener('pointerup', onEnd, {passive:true}); arBody.addEventListener('pointercancel', onEnd, {passive:true}); })(); closeApplyRewards(); } // Run now + after DOM ready (covers late-mount + refresh scenarios) if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init, { once:true }); } init(); })();;