/* ========================================================================== Paybeta Modern Theme Layered on top of assets/css/style.css (base template framework). ========================================================================== */ :root { --pb-bg: #F5F4FB; --pb-surface: #FFFFFF; --pb-primary: #36009F; --pb-primary-2: #6D28D9; --pb-primary-soft: #ECE6FB; --pb-on-primary: #FFFFFF; --pb-text: #17112B; --pb-text-muted: #8B87A0; --pb-border: #ECEAF5; --pb-success: #17B26A; --pb-success-soft: #E7F9EF; --pb-danger: #F04438; --pb-danger-soft: #FDECEA; --pb-warning: #F79009; --pb-warning-soft: #FFF4DE; --pb-info: #2563EB; --pb-info-soft: #E5EDFF; --pb-airtime: #2F6FED; --pb-airtime-soft: #E8F0FE; --pb-data: #06AED4; --pb-data-soft: #E3FAFD; --pb-electricity: #F7A600; --pb-electricity-soft: #FFF4DE; --pb-tv: #FF6B4A; --pb-tv-soft: #FFEDE7; --pb-education: #17B26A; --pb-education-soft: #E7F9EF; --pb-gaming: #EC4899; --pb-gaming-soft: #FDEBF3; --pb-insurance: #14B8A6; --pb-insurance-soft: #E4FBF8; --pb-radius-lg: 22px; --pb-radius-md: 16px; --pb-radius-sm: 12px; --pb-shadow-sm: 0 2px 10px -4px rgba(23, 17, 43, 0.08); --pb-shadow: 0 10px 30px -12px rgba(54, 0, 159, 0.22); --pb-shadow-lg: 0 20px 45px -18px rgba(54, 0, 159, 0.30); /* Dedicated gradient for white-text hero surfaces (wallet card, splash). Kept separate from --pb-primary/--pb-primary-2 on purpose: those get brightened in dark mode for legibility as an accent on dark surfaces, which would wash out a gradient meant to carry white text on top. */ --pb-hero-1: #36009F; --pb-hero-2: #6D28D9; color-scheme: light dark; } /* ---------- Dark mode ---------- Two ways in: the OS-level preference (applied automatically), or an explicit user choice persisted via assets/js/theme.js, which sets data-theme on and always wins over the media query in both directions (light override on a dark system, dark override on a light system). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pb-bg: #100B1E; --pb-surface: #1C1630; --pb-primary: #9F6BFF; --pb-primary-2: #B583FF; --pb-primary-soft: rgba(159, 107, 255, 0.18); --pb-text: #F4F2FA; --pb-text-muted: #A79FC2; --pb-border: #2E2647; --pb-success: #34D399; --pb-success-soft: rgba(52, 211, 153, 0.16); --pb-danger: #FF6B6B; --pb-danger-soft: rgba(255, 107, 107, 0.16); --pb-warning: #FBBF24; --pb-warning-soft: rgba(251, 191, 36, 0.16); --pb-info: #60A5FA; --pb-info-soft: rgba(96, 165, 250, 0.16); --pb-airtime: #6FA1FF; --pb-airtime-soft: rgba(111, 161, 255, 0.16); --pb-data: #2DD4E8; --pb-data-soft: rgba(45, 212, 232, 0.16); --pb-electricity: #FBBF24; --pb-electricity-soft: rgba(251, 191, 36, 0.16); --pb-tv: #FF8B6E; --pb-tv-soft: rgba(255, 139, 110, 0.16); --pb-education: #34D399; --pb-education-soft: rgba(52, 211, 153, 0.16); --pb-gaming: #F472B6; --pb-gaming-soft: rgba(244, 114, 182, 0.16); --pb-insurance: #2DD4BF; --pb-insurance-soft: rgba(45, 212, 191, 0.16); --pb-hero-1: #36009F; --pb-hero-2: #6D28D9; --pb-shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.45); --pb-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); --pb-shadow-lg: 0 20px 45px -18px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { --pb-bg: #100B1E; --pb-surface: #1C1630; --pb-primary: #9F6BFF; --pb-primary-2: #B583FF; --pb-primary-soft: rgba(159, 107, 255, 0.18); --pb-text: #F4F2FA; --pb-text-muted: #A79FC2; --pb-border: #2E2647; --pb-success: #34D399; --pb-success-soft: rgba(52, 211, 153, 0.16); --pb-danger: #FF6B6B; --pb-danger-soft: rgba(255, 107, 107, 0.16); --pb-warning: #FBBF24; --pb-warning-soft: rgba(251, 191, 36, 0.16); --pb-info: #60A5FA; --pb-info-soft: rgba(96, 165, 250, 0.16); --pb-airtime: #6FA1FF; --pb-airtime-soft: rgba(111, 161, 255, 0.16); --pb-data: #2DD4E8; --pb-data-soft: rgba(45, 212, 232, 0.16); --pb-electricity: #FBBF24; --pb-electricity-soft: rgba(251, 191, 36, 0.16); --pb-tv: #FF8B6E; --pb-tv-soft: rgba(255, 139, 110, 0.16); --pb-education: #34D399; --pb-education-soft: rgba(52, 211, 153, 0.16); --pb-gaming: #F472B6; --pb-gaming-soft: rgba(244, 114, 182, 0.16); --pb-insurance: #2DD4BF; --pb-insurance-soft: rgba(45, 212, 191, 0.16); --pb-hero-1: #36009F; --pb-hero-2: #6D28D9; --pb-shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.45); --pb-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); --pb-shadow-lg: 0 20px 45px -18px rgba(0, 0, 0, 0.55); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } * { -webkit-tap-highlight-color: transparent; } body { background: var(--pb-bg) !important; color: var(--pb-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0; } #appCapsule { background: var(--pb-bg); } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--pb-text); font-weight: 700; letter-spacing: -0.01em; } /* ---------- Top bar ---------- */ .pb-topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 14px) 20px 14px; background: var(--pb-bg); position: sticky; top: 0; z-index: 20; } .pb-topbar .pb-back { width: 38px; height: 38px; border-radius: 12px; background: var(--pb-surface); box-shadow: var(--pb-shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--pb-text); font-size: 20px; flex-shrink: 0; } .pb-topbar .pb-title { font-size: clamp(14px, 4.2vw, 17px); font-weight: 700; color: var(--pb-text); } .pb-topbar .pb-action { width: 38px; height: 38px; border-radius: 12px; background: var(--pb-surface); box-shadow: var(--pb-shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--pb-primary); font-size: 19px; flex-shrink: 0; } .pb-tx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .pb-tx-meta { display: flex; align-items: center; gap: clamp(3px, 1.4vw, 6px); font-size: clamp(9.5px, 2.9vw, 12px); } .pb-tx-date { font-size: clamp(8.5px, 2.5vw, 10px); color: var(--pb-text-muted, #94a3b8); } .pb-tx-status { font-weight: 500; text-transform: capitalize; } .pb-status-success { color: #16a34a; } .pb-status-pending { color: #d97706; } .pb-status-failed { color: #dc2626; } .pb-status-info { color: var(--pb-info); } .pb-topbar .pb-spacer { width: 38px; height: 38px; flex-shrink: 0; } /* ---------- Page container ---------- */ .pb-page { /* fluid side padding — tighter on narrow devices (e.g. Galaxy Z Fold cover) */ padding: 0 clamp(12px, 4vw, 20px) 110px; } .pb-section-title { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 12px; } .pb-section-title h4 { font-size: clamp(13px, 4vw, 15px); margin: 0; } .pb-section-title a { font-size: 13px; font-weight: 600; color: var(--pb-primary); } /* ---------- Cards ---------- */ .pb-card { background: var(--pb-surface); border-radius: var(--pb-radius-lg); box-shadow: var(--pb-shadow-sm); padding: clamp(13px, 4vw, 18px); } /* ---------- Wallet card ---------- */ .pb-wallet-card { position: relative; overflow: hidden; border-radius: var(--pb-radius-lg); padding: 22px 22px 20px; background: linear-gradient(135deg, var(--pb-hero-1) 0%, var(--pb-hero-2) 100%); box-shadow: var(--pb-shadow-lg); color: #fff; } .pb-wallet-card::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.08); top: -90px; right: -60px; } .pb-wallet-card::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,0.06); bottom: -80px; left: -40px; } .pb-wallet-card .pb-wallet-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; } .pb-wallet-card .pb-greeting { font-size: 12.5px; opacity: 0.85; margin-bottom: 2px; } .pb-wallet-card .pb-label { font-size: 12px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.04em; } .pb-wallet-card .pb-balance { /* font-size: 28px; */ font-weight: 800; margin-top: 4px; color: #fff; display: flex; align-items: center; gap: 8px; } .pb-wallet-card .pb-eye-toggle { background: rgba(255,255,255,0.16); border: none; width: 30px; height: 30px; border-radius: 9px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .pb-wallet-card .pb-bell { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; } .pb-wallet-card .pb-wallet-id { text-align: right; } .pb-wallet-id-value { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; } .pb-wallet-id-copy { flex-shrink: 0; width: 20px; height: 20px; border: none; border-radius: 6px; background: rgba(255,255,255,0.18); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; } .pb-wallet-id-copy.copied { background: rgba(255,255,255,0.4); } .pb-wallet-footer { display: flex; gap: 8px; margin-top: 14px; position: relative; z-index: 1; } .pb-wallet-footer .pb-wallet-btn { background: rgba(255,255,255,0.16); border-radius: 10px; padding: 6px 12px; text-align: center; color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .pb-wallet-footer .pb-wallet-btn ion-icon { font-size: 14px; } /* ---------- Service grid ---------- */ .pb-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; margin-top: 18px; } .pb-service-item { display: flex; flex-direction: column; align-items: center; gap: 7px; color: inherit; } .pb-service-icon { width: 54px; height: 54px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--pb-primary-soft); color: var(--pb-primary); transition: transform .12s ease; } .pb-service-item:active .pb-service-icon { transform: scale(0.92); } .pb-service-label { font-size: 11.5px; font-weight: 600; color: var(--pb-text); text-align: center; } /* Custom single-color service icon set (no icon-font/library dependency) */ .pb-svg-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pb-service-icon .pb-svg-icon { width: 25px; height: 25px; } .pb-option .pb-svg-icon, .pb-biller-row .pb-svg-icon { width: 22px; height: 22px; } .pb-c-airtime { background: var(--pb-airtime-soft); color: var(--pb-airtime); } .pb-c-data { background: var(--pb-data-soft); color: var(--pb-data); } .pb-c-electricity { background: var(--pb-electricity-soft); color: var(--pb-electricity); } .pb-c-tv { background: var(--pb-tv-soft); color: var(--pb-tv); } .pb-c-education { background: var(--pb-education-soft); color: var(--pb-education); } .pb-c-gaming { background: var(--pb-gaming-soft); color: var(--pb-gaming); } .pb-c-insurance { background: var(--pb-insurance-soft); color: var(--pb-insurance); } .pb-c-primary { background: var(--pb-primary-soft); color: var(--pb-primary); } /* ---------- Buttons ---------- */ .pb-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: 999px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .08s ease, opacity .15s ease; } .pb-btn:active { transform: scale(0.98); } .pb-btn:disabled { opacity: 0.55; } .pb-btn-primary { background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-2) 100%); color: #fff; box-shadow: 0 12px 24px -10px rgba(54, 0, 159, 0.45); } .pb-btn-outline { background: var(--pb-surface); color: var(--pb-primary); border: 1.5px solid var(--pb-border); } .pb-btn-ghost { background: var(--pb-primary-soft); color: var(--pb-primary); } .pb-btn-sm { height: 42px; font-size: 13.5px; } /* ---------- Inputs ---------- */ .pb-field { margin-bottom: 14px; } .pb-field label { display: block; font-size: clamp(11px, 3.3vw, 12.5px); font-weight: 600; color: var(--pb-text-muted); margin-bottom: 7px; } .pb-input-wrap { position: relative; } .pb-field input, .pb-field select, .pb-field .pb-select { width: 100%; max-width: 100%; height: 52px; border-radius: var(--pb-radius-sm); border: 1.5px solid var(--pb-border); background: var(--pb-surface); padding: 0 clamp(11px, 3.5vw, 16px); font-size: clamp(13px, 3.8vw, 15px); color: var(--pb-text); outline: none; transition: border-color .15s ease; -webkit-appearance: none; appearance: none; } /* native date inputs: keep them from overflowing their (narrow) column */ .pb-field input[type="date"] { min-width: 0; padding-right: clamp(6px, 2vw, 12px); } .pb-field input[type="date"]::-webkit-date-and-time-value { text-align: left; } .pb-field input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 0; padding: 0; } .pb-field textarea { width: 100%; border-radius: var(--pb-radius-sm); border: 1.5px solid var(--pb-border); background: var(--pb-surface); padding: 14px 16px; font-size: 15px; color: var(--pb-text); outline: none; } .pb-field input:focus, .pb-field select:focus, .pb-field textarea:focus { border-color: var(--pb-primary); } .pb-field .pb-icon-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--pb-text-muted); font-size: 18px; } .pb-field select { background-image: none; padding-right: 40px; } .pb-select-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--pb-text-muted); font-size: 18px; pointer-events: none; } /* ---------- Biller picker ---------- */ .pb-biller-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px; } .pb-biller { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; border-radius: var(--pb-radius-sm); border: 1.5px solid var(--pb-border); background: var(--pb-surface); cursor: pointer; color: var(--pb-text); } .pb-biller.active { border-color: var(--pb-primary); background: var(--pb-primary-soft); } .pb-biller-logo { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; } .pb-biller-name { font-size: 11px; font-weight: 600; text-align: center; } .pb-biller-list { display: flex; flex-direction: column; gap: 10px; } .pb-biller-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--pb-radius-sm); border: 1.5px solid var(--pb-border); background: var(--pb-surface); cursor: pointer; } .pb-biller-row.active { border-color: var(--pb-primary); background: var(--pb-primary-soft); } .pb-biller-row .pb-biller-logo { width: 36px; height: 36px; font-size: 12px; flex-shrink: 0; } .pb-biller-row .pb-biller-name { text-align: left; font-size: 13.5px; flex: 1; } .pb-biller-row .pb-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pb-border); flex-shrink: 0; } .pb-biller-row.active .pb-radio { border-color: var(--pb-primary); background: var(--pb-primary); box-shadow: inset 0 0 0 3px #fff; } /* ---------- Amount chips ---------- */ .pb-chip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .pb-chip { height: 42px; border-radius: var(--pb-radius-sm); border: 1.5px solid var(--pb-border); background: var(--pb-surface); font-size: 13.5px; font-weight: 700; color: var(--pb-text); display: flex; align-items: center; justify-content: center; } .pb-chip.active { border-color: var(--pb-primary); background: var(--pb-primary-soft); color: var(--pb-primary); } /* ---------- Plan / list options ---------- */ .pb-option-list { display: flex; flex-direction: column; gap: 10px; } .pb-option { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--pb-radius-sm); border: 1.5px solid var(--pb-border); background: var(--pb-surface); cursor: pointer; } .pb-option.active { border-color: var(--pb-primary); background: var(--pb-primary-soft); } .pb-option .pb-option-title { font-size: 13.5px; font-weight: 700; } .pb-option .pb-option-sub { font-size: 11.5px; color: var(--pb-text-muted); margin-top: 2px; } .pb-option .pb-option-price { font-size: 13.5px; font-weight: 800; color: var(--pb-primary); } /* ---------- Transaction list ---------- */ .pb-tx-item { display: flex; align-items: center; gap: clamp(8px, 3vw, 12px); padding: clamp(10px, 3vw, 13px) 0; border-bottom: 1px solid var(--pb-border); } .pb-tx-item:last-child { border-bottom: none; } .pb-tx-icon { width: clamp(30px, 9vw, 42px); height: clamp(30px, 9vw, 42px); border-radius: clamp(9px, 3vw, 13px); display: flex; align-items: center; justify-content: center; font-size: clamp(14px, 4.4vw, 19px); flex-shrink: 0; } .pb-tx-info { flex: 1; min-width: 0; } /* Title stays on one line; overflow is cut with an ellipsis. */ .pb-tx-title { font-size: clamp(11px, 3.4vw, 13.5px); font-weight: 700; color: var(--pb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-tx-sub { font-size: clamp(9.5px, 2.9vw, 11.5px); color: var(--pb-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-tx-amount { font-size: clamp(11px, 3.4vw, 13.5px); font-weight: 800; white-space: nowrap; flex-shrink: 0; } .pb-tx-amount.debit { color: var(--pb-danger); } .pb-tx-amount.credit { color: var(--pb-success); } /* ---------- Status badge / pill ---------- */ .pb-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; } .pb-pill-success { background: var(--pb-success-soft); color: var(--pb-success); } .pb-pill-danger { background: var(--pb-danger-soft); color: var(--pb-danger); } .pb-pill-warning { background: var(--pb-warning-soft); color: var(--pb-warning); } /* ---------- Bottom nav ---------- */ .pb-bottom-nav { position: fixed; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 12px); background: var(--pb-surface); border-radius: 22px; box-shadow: var(--pb-shadow-lg); display: flex; align-items: center; justify-content: space-around; padding: 8px 6px; z-index: 50; } .pb-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--pb-text-muted); padding: 6px 10px; border-radius: 14px; font-size: 10px; font-weight: 600; flex: 1; } .pb-nav-item ion-icon { font-size: 21px; } .pb-nav-item.active { color: var(--pb-primary); background: var(--pb-primary-soft); } /* ---------- Onboarding / splash ---------- */ .pb-splash { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(160deg, var(--pb-hero-1) 0%, var(--pb-hero-2) 55%, #B26CF2 100%); color: #fff; padding: calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 24px); } .pb-splash .pb-logo-mark { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; margin-bottom: 20px; } .pb-splash .pb-brand { font-size: 20px; font-weight: 800; margin-bottom: auto; } .pb-splash .pb-slide-art { width: 100%; aspect-ratio: 1.1/1; border-radius: 26px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; overflow: hidden; } .pb-splash .pb-slide-icon { width: 46%; height: 46%; fill: none; stroke: rgba(255,255,255,0.95); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; } .pb-splash h2 { color: #fff; font-size: 24px; margin-bottom: 8px; } .pb-splash p { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.5; margin-bottom: 0; } .pb-splash .pb-dots { display: flex; gap: 6px; margin: 22px 0; } .pb-splash .pb-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); } .pb-splash .pb-dots span.active { width: 20px; background: #fff; } .pb-splash .pb-cta { display: flex; gap: 10px; } .pb-splash .pb-btn-primary { background: #fff; color: var(--pb-primary); box-shadow: none; } .pb-splash .pb-btn-outline { background: rgba(255,255,255,0.14); color: #fff; border: 1.5px solid rgba(255,255,255,0.4); } /* ---------- Auth ---------- */ .pb-auth-header { padding: calc(env(safe-area-inset-top) + 30px) 24px 10px; } .pb-auth-header .pb-logo-mark { width: 46px; height: 46px; border-radius: 14px; background: var(--pb-primary-soft); color: var(--pb-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; margin-bottom: 16px; } .pb-auth-header h1 { font-size: 23px; margin-bottom: 6px; } .pb-auth-header p { color: var(--pb-text-muted); font-size: 13.5px; } .pb-auth-body { padding: 6px 24px 40px; } .pb-auth-foot { text-align: center; font-size: 13.5px; color: var(--pb-text-muted); margin-top: 18px; } .pb-auth-foot a { color: var(--pb-primary); font-weight: 700; } .pb-divider-text { display: flex; align-items: center; gap: 10px; color: var(--pb-text-muted); font-size: 12px; margin: 18px 0; } .pb-divider-text::before, .pb-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--pb-border); } /* ---------- PIN pad ---------- */ .pb-pin-dots { display: flex; justify-content: center; gap: 14px; margin: 22px 0; } .pb-pin-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pb-border); background: transparent; } .pb-pin-dots span.filled { background: var(--pb-primary); border-color: var(--pb-primary); } .pb-pin-input { width: 100%; text-align: center; letter-spacing: 12px; font-size: 22px; font-weight: 800; border: none; background: transparent; outline: none; caret-color: var(--pb-primary); } /* ---------- Confirm summary ---------- */ .pb-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(10px, 3vw, 12px) 0; border-bottom: 1px dashed var(--pb-border); font-size: clamp(11.5px, 3.5vw, 13.5px); } .pb-summary-row:last-child { border-bottom: none; } .pb-summary-row .k { color: var(--pb-text-muted); flex-shrink: 0; } .pb-summary-row .v { flex: 1; min-width: 0; font-weight: 700; color: var(--pb-text); text-align: right; overflow-wrap: anywhere; } .pb-summary-total { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 14px; border-top: 1.5px solid var(--pb-border); } .pb-summary-total .k { font-size: 14px; font-weight: 700; } .pb-summary-total .v { font-size: 20px; font-weight: 800; color: var(--pb-primary); } /* ---------- Transaction detail ---------- */ .pb-tx-item[data-idx] { cursor: pointer; } .pb-tx-item[data-idx]:active { opacity: 0.55; } .pb-tx-detail-head { text-align: center; padding: clamp(8px, 3vw, 12px) 0 clamp(16px, 5vw, 24px); } .pb-tx-detail-status-icon { /* smaller device -> smaller icon */ width: clamp(58px, 25vw, 104px); height: clamp(58px, 25vw, 104px); border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: clamp(36px, 15.5vw, 64px); } .pb-tx-detail-status-icon.pb-status-success { background: var(--pb-success-soft); color: var(--pb-success); } .pb-tx-detail-status-icon.pb-status-pending { background: var(--pb-warning-soft); color: var(--pb-warning); } .pb-tx-detail-status-icon.pb-status-failed { background: var(--pb-danger-soft); color: var(--pb-danger); } .pb-tx-detail-status-icon.pb-status-info { background: var(--pb-info-soft); color: var(--pb-info); } /* status value colour (out-specify the default .pb-summary-row .v colour) */ .pb-summary-row .v.pb-status-success { color: var(--pb-success); } .pb-summary-row .v.pb-status-pending { color: var(--pb-warning); } .pb-summary-row .v.pb-status-failed { color: var(--pb-danger); } .pb-summary-row .v.pb-status-info { color: var(--pb-info); } /* stacked copy chip (tokens / vouchers / reference) — full width, wraps, never truncated */ .pb-summary-row.pb-copy-chip { flex-direction: column; align-items: stretch; gap: 8px; } .pb-copy-value { display: flex; align-items: center; gap: 8px; } .pb-copy-text { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: clamp(11px, 3.2vw, 13px); letter-spacing: 0.02em; color: var(--pb-text); background: var(--pb-primary-soft); padding: clamp(7px, 2.5vw, 9px) clamp(8px, 3vw, 11px); border-radius: 9px; overflow-wrap: anywhere; word-break: break-all; } .pb-copy-btn { flex-shrink: 0; width: clamp(26px, 8vw, 30px); height: clamp(26px, 8vw, 30px); display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: var(--pb-primary-soft); color: var(--pb-primary); font-size: clamp(13px, 4vw, 15px); cursor: pointer; } .pb-copy-btn.copied { background: var(--pb-success-soft); color: var(--pb-success); } /* ---------- Success screen ---------- */ .pb-success-wrap { text-align: center; padding: 60px 24px 24px; } .pb-success-icon { width: 84px; height: 84px; border-radius: 50%; background: var(--pb-success-soft); color: var(--pb-success); display: flex; align-items: center; justify-content: center; font-size: 44px; margin: 0 auto 20px; } .pb-success-wrap h2 { font-size: 20px; margin-bottom: 6px; } .pb-success-wrap p { color: var(--pb-text-muted); font-size: 13.5px; } .pb-receipt { text-align: left; background: var(--pb-surface); border-radius: var(--pb-radius-lg); box-shadow: var(--pb-shadow-sm); padding: 18px; margin: 22px 0; } /* ---------- Empty state ---------- */ .pb-empty { text-align: center; padding: 50px 20px; color: var(--pb-text-muted); } .pb-empty ion-icon { font-size: 44px; margin-bottom: 10px; opacity: 0.5; } .pb-empty p { font-size: 13.5px; } /* ---------- Filter tabs ---------- */ .pb-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; } .pb-tabs::-webkit-scrollbar { display: none; } .pb-tab { flex-shrink: 0; padding: 9px clamp(10px, 3.6vw, 16px); border-radius: 999px; font-size: clamp(11px, 3.4vw, 12.5px); font-weight: 700; background: var(--pb-surface); border: 1.5px solid var(--pb-border); color: var(--pb-text-muted); } .pb-tab.active { background: var(--pb-primary); border-color: var(--pb-primary); color: #fff; } /* ---------- Transaction filters ---------- */ .pb-tabs-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .pb-tabs-row .pb-tabs { flex: 1; min-width: 0; } .pb-filter-toggle { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; } .pb-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--pb-primary); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; } .pb-tab.active .pb-filter-badge { background: #fff; color: var(--pb-primary); } .pb-filter-panel { margin-bottom: 14px; } /* two columns when they fit, stack on narrow screens (Galaxy Z Fold cover etc.) */ .pb-filter-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .pb-filter-dates .pb-field { min-width: 0; } .pb-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; } .pb-filter-actions .pb-btn { width: auto; padding: 0 22px; } .pb-filter-clear { margin-right: auto; background: none; border: none; padding: 4px; color: var(--pb-primary); font-weight: 700; font-size: 12.5px; } /* ---------- Toast override ---------- */ #toast-16.toast-box, .toast-box { border-radius: var(--pb-radius-sm) !important; } /* ---------- Utility ---------- */ .pb-mt-0 { margin-top: 0 !important; } .pb-flex { display: flex; } .pb-flex-between { display: flex; align-items: center; justify-content: space-between; } .pb-gap-8 { gap: 8px; } .pb-muted { color: var(--pb-text-muted); } /* ---------- Network status banner ---------- */ .pb-net-banner { position: fixed; left: 14px; right: 14px; top: calc(env(safe-area-inset-top) + 10px); z-index: 200; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 14px; font-size: 12.5px; font-weight: 700; box-shadow: var(--pb-shadow); transform: translateY(-140%); transition: transform .25s ease; pointer-events: none; } .pb-net-banner.show { transform: translateY(0); } .pb-net-banner svg { width: 16px; height: 16px; flex-shrink: 0; } .pb-net-banner.offline { background: var(--pb-danger); color: #fff; } .pb-net-banner.online { background: var(--pb-success); color: #fff; } /* ---------- Add to Home Screen sheet ---------- */ .pb-a2hs-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .pb-a2hs-backdrop.show { opacity: 1; pointer-events: auto; } .pb-a2hs-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; background: var(--pb-surface); border-radius: 24px 24px 0 0; box-shadow: var(--pb-shadow-lg); padding: 10px 22px calc(env(safe-area-inset-bottom) + 22px); transform: translateY(100%); transition: transform .28s ease; } .pb-a2hs-backdrop.show .pb-a2hs-sheet { transform: translateY(0); } .pb-a2hs-sheet .pb-a2hs-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--pb-border); margin: 8px auto 16px; } .pb-a2hs-sheet .pb-a2hs-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 6px; } .pb-a2hs-sheet .pb-a2hs-icon { width: 48px; height: 48px; border-radius: 15px; background: var(--pb-primary-soft); color: var(--pb-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pb-a2hs-sheet .pb-a2hs-icon svg { width: 26px; height: 26px; } .pb-a2hs-sheet h3 { font-size: 16px; margin-bottom: 3px; } .pb-a2hs-sheet p { color: var(--pb-text-muted); font-size: 13px; line-height: 1.45; margin-bottom: 0; } .pb-a2hs-sheet .pb-a2hs-close { margin-left: auto; width: 30px; height: 30px; border-radius: 10px; background: var(--pb-bg); color: var(--pb-text-muted); display: flex; align-items: center; justify-content: center; border: none; flex-shrink: 0; } .pb-a2hs-sheet .pb-a2hs-steps { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 18px; } .pb-a2hs-sheet .pb-a2hs-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pb-text); } .pb-a2hs-sheet .pb-a2hs-step .n { width: 22px; height: 22px; border-radius: 999px; background: var(--pb-primary-soft); color: var(--pb-primary); font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ---------- Generic bottom sheet (statement date range, etc.) ---------- */ .pb-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .pb-sheet-backdrop.show { opacity: 1; pointer-events: auto; } .pb-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; background: var(--pb-surface); border-radius: 24px 24px 0 0; box-shadow: var(--pb-shadow-lg); padding: 10px clamp(16px, 5vw, 22px) calc(env(safe-area-inset-bottom) + 22px); transform: translateY(100%); transition: transform .28s ease; max-height: 88vh; overflow-y: auto; } .pb-sheet-backdrop.show .pb-sheet { transform: translateY(0); } .pb-sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--pb-border); margin: 8px auto 16px; } .pb-sheet-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; } .pb-sheet-head h3 { font-size: clamp(15px, 4.4vw, 17px); margin: 0 0 3px; } .pb-sheet-head p { color: var(--pb-text-muted); font-size: clamp(12px, 3.5vw, 13px); line-height: 1.45; margin: 0; } .pb-sheet-close { margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; background: var(--pb-bg); color: var(--pb-text-muted); border: none; display: flex; align-items: center; justify-content: center; } .pb-sheet-error { color: var(--pb-danger); font-size: clamp(11.5px, 3.3vw, 12.5px); font-weight: 600; margin: 4px 0 0; } /* ---------- Affiliate / referral card (compact) ---------- */ .pb-referral-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, var(--pb-hero-1) 0%, var(--pb-hero-2) 100%); color: #fff; border-radius: var(--pb-radius-md); padding: 10px 14px; } .pb-referral-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; margin-bottom: 2px; } .pb-referral-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; font-size: clamp(13.5px, 3.9vw, 15.5px); letter-spacing: 0.07em; line-height: 1.25; overflow-wrap: anywhere; } .pb-referral-card .pb-copy-btn { flex-shrink: 0; background: rgba(255,255,255,0.22); color: #fff; } .pb-referral-card .pb-copy-btn.copied { background: rgba(255,255,255,0.44); } .pb-copy-btn-sm { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; } /* ---------- Horizontal swipe strip (home "Pay again") ---------- */ .pb-hscroll { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 4px; margin: 0 -2px; } .pb-hscroll::-webkit-scrollbar { display: none; } .pb-payagain-card { flex: 0 0 auto; width: clamp(150px, 46vw, 186px); scroll-snap-align: start; display: flex; align-items: center; gap: 9px; background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius-sm); box-shadow: var(--pb-shadow-sm); padding: 8px 10px; cursor: pointer; } .pb-payagain-card:active { transform: scale(0.98); } .pb-payagain-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; } .pb-payagain-body { min-width: 0; flex: 1; text-align: left; overflow: hidden; } .pb-payagain-name { display: block; line-height: 1.35; font-size: clamp(11px, 3.1vw, 12px); font-weight: 700; color: var(--pb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-payagain-sub { display: block; line-height: 1.35; font-size: clamp(9.5px, 2.7vw, 10.5px); font-weight: 700; color: var(--pb-text); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-payagain-sub .to { color: var(--pb-text-muted); font-weight: 400; } /* ---------- Home promo banners (API image_url, swipe left) ---------- */ .pb-banners { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 40px 0 4px; } .pb-banners::-webkit-scrollbar { display: none; } .pb-banner { flex: 0 0 78%; scroll-snap-align: center; display: block; border-radius: var(--pb-radius-md); overflow: hidden; box-shadow: var(--pb-shadow-sm); aspect-ratio: 24 / 9; background: var(--pb-primary-soft); } .pb-banner:active { transform: scale(0.99); } .pb-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- Saved-beneficiary quick-pick chips ---------- */ .pb-ben-chips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin: 0 0 14px; } .pb-ben-chips::-webkit-scrollbar { display: none; } .pb-ben-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 190px; background: var(--pb-surface); border: 1.5px solid var(--pb-border); border-radius: 999px; padding: 7px 14px; cursor: pointer; } .pb-ben-chip:active { border-color: var(--pb-primary); } .pb-ben-chip-name { font-size: clamp(11px, 3.2vw, 12.5px); font-weight: 700; color: var(--pb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .pb-ben-chip-id { font-size: clamp(9.5px, 2.7vw, 10.5px); color: var(--pb-text-muted); white-space: nowrap; } /* ---------- Transaction detail action buttons ---------- */ .pb-detail-actions { display: flex; gap: 10px; margin-top: 22px; } .pb-detail-actions .pb-btn { flex: 1; }