/* ===================================================================== OTPSUITE V2 — Design System Foundation Loaded AFTER style.css; restyles the shared shell + components to the new "warm-orange fintech" language from the design references. Targets existing class names (appHeader, appBottomMenu, gradientSection, services-section, icon-wrapper, btn-primary, form-control, nice-select…) so current view markup keeps working. New component classes are prefixed .v2- so they never collide with the legacy base. ===================================================================== */ :root { /* Brand */ --v2-brand: #FF6D00; --v2-brand-strong: #F25C00; --v2-brand-soft: #FFF3E9; --v2-brand-soft-2: #FFE7D2; --v2-brand-grad: linear-gradient(135deg, #FF8A1E 0%, #FF5A00 100%); /* Surfaces */ --v2-bg: #F6F7F9; --v2-surface: #FFFFFF; --v2-surface-2: #FBFBFD; --v2-peach: #FFF3E9; /* Ink */ --v2-ink: #1F2330; --v2-ink-2: #3A4150; --v2-muted: #8A8F9C; --v2-line: #EDEEF2; --v2-line-strong: #E2E4EA; /* Status */ --v2-ok: #16A34A; --v2-ok-bg: #E9F8EF; --v2-warn: #D97706; --v2-warn-bg: #FFF4E3; --v2-danger: #E5484D; --v2-danger-bg: #FDECEC; --v2-info: #4F46E5; --v2-info-bg: #EEF0FF; /* Shape */ --v2-radius: 18px; --v2-radius-sm: 13px; --v2-radius-lg: 22px; --v2-pill: 999px; /* Elevation */ --v2-shadow-sm: 0 1px 2px rgba(17, 24, 39, .05); --v2-shadow: 0 8px 22px rgba(20, 24, 40, .07); --v2-shadow-md: 0 14px 30px rgba(20, 24, 40, .10); --v2-shadow-brand: 0 10px 22px rgba(255, 109, 0, .30); --v2-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ---------------------------------------------------------------- base */ body { font-family: var(--v2-font); color: var(--v2-ink); background: var(--v2-bg); } #app { max-width: 480px; padding: 1rem 1rem 6.5rem; } .v2-muted { color: var(--v2-muted) !important; } .v2-ink { color: var(--v2-ink) !important; } /* soft warm ambient backdrop behind the app column */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 260px; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 138, 30, .14), transparent 60%), radial-gradient(90% 70% at 0% 0%, rgba(255, 109, 0, .08), transparent 55%); pointer-events: none; z-index: -1; } /* #app must NOT establish a stacking context, otherwise Bootstrap modals (z-index 1055) get trapped beneath their backdrop (1050, appended to ), leaving the modal visible but unclickable. Keep position only, no z-index. */ #app { position: relative; } .appBottomMenu { position: relative; z-index: 100; } /* ------------------------------------------------------------- app header */ .appHeader { background: transparent; padding: 6px 0; height: auto; } .appHeader .welcome-mesg span.text-muted { font-size: 12px; color: var(--v2-muted); } .appHeader .welcome-mesg span:last-child { font-size: 15px; font-weight: 700; color: var(--v2-ink); } .appHeader .avatar.avatar-initials, .appHeader .avatar { border-radius: 16px; box-shadow: var(--v2-shadow-sm); } .appHeader .right .headerButton, .appHeader .left .headerButton { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--v2-line-strong); background: var(--v2-surface); color: var(--v2-ink); box-shadow: var(--v2-shadow-sm); } .appHeader .headerButton .badge.badge-danger { background: var(--v2-danger); border: 2px solid #fff; font-size: 10px; font-weight: 700; } /* currency pill (NGN switcher) */ .v2-cur-pill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--v2-line-strong); border-radius: var(--v2-pill); background: var(--v2-surface); font-weight: 600; font-size: 13px; color: var(--v2-ink); box-shadow: var(--v2-shadow-sm); } .v2-cur-pill .v2-cur-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-ok); } .v2-cur-pill .v2-cur-flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; display: block; } /* currency selector — dropdown */ .v2-cur { position: relative; display: inline-block; } .v2-cur .v2-cur-pill { cursor: pointer; font-family: inherit; } .v2-cur .v2-cur-pill:hover { background: #FFF7EE; border-color: var(--v2-brand); } .v2-cur .v2-cur-pill i.ri-arrow-down-s-line { transition: transform .18s ease; font-size: 16px; color: #6b7280; } .v2-cur.is-open .v2-cur-pill i.ri-arrow-down-s-line { transform: rotate(180deg); } .v2-cur-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 220px; padding: 6px; background: #fff; border: 1px solid var(--v2-line); border-radius: 12px; box-shadow: 0 10px 26px rgba(20,24,40,.12); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; } .v2-cur.is-open .v2-cur-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s; } .v2-cur-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; text-align: left; font-family: inherit; font-size: 13px; color: var(--v2-ink); } .v2-cur-opt:hover { background: #FFF3E9; } .v2-cur-opt.is-active { background: #FFF8F0; } .v2-cur-opt img { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; } .v2-cur-opt .v2-cur-opt-code { font-weight: 700; } .v2-cur-opt .v2-cur-opt-name { color: #6b7280; font-weight: 500; flex: 1; } .v2-cur-opt .v2-cur-check { color: var(--v2-brand); font-size: 16px; } body.dark-mode .v2-cur-menu { background: #121829; border-color: rgba(255,255,255,.10); } body.dark-mode .v2-cur-opt { color: #e6e8ee; } body.dark-mode .v2-cur-opt:hover { background: rgba(255,109,0,.10); } body.dark-mode .v2-cur-opt.is-active { background: rgba(255,109,0,.14); } body.dark-mode .v2-cur-opt .v2-cur-opt-name { color: #9aa3b2; } /* --------------------------------------------------------- inner page header */ .v2-page-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; } .v2-page-head .v2-back { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: var(--v2-surface); border: 1px solid var(--v2-line-strong); color: var(--v2-ink); font-size: 20px; box-shadow: var(--v2-shadow-sm); } .v2-page-head .v2-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--v2-ink); line-height: 1.15; } .v2-page-head .v2-subtitle { margin: 2px 0 0; font-size: 12px; color: var(--v2-muted); } /* --------------------------------------------------------------- cards */ .v2-card { background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); } .v2-card-pad { padding: 16px; } /* ----------------------------------------------------- wallet balance card */ /* Orange-gradient variant (buy-number, boost, etc.) */ .gradientSection, .v2-wallet-orange { background: var(--v2-brand-grad) !important; border-radius: var(--v2-radius-lg); color: #fff; box-shadow: var(--v2-shadow-brand); overflow: hidden; position: relative; } .gradientSection .title, .gradientSection h5 { color: rgba(255,255,255,.9) !important; } .gradientSection .total, .v2-wallet-orange .total { color: #fff !important; font-weight: 800; } /* Light peach variant (dashboard main balance) */ .v2-wallet-light { background: linear-gradient(135deg, #FFF8F1 0%, #FFE1C0 100%); border: 1px solid rgba(255,138,30,.16); border-radius: var(--v2-radius-lg); box-shadow: var(--v2-shadow); position: relative; overflow: hidden; padding: 22px 18px 24px; } .v2-wallet-light .v2-wallet-label { color: var(--v2-muted); font-size: 13px; font-weight: 600; } .v2-wallet-light .v2-wallet-amount { color: var(--v2-ink); font-size: 30px; font-weight: 800; letter-spacing: -.5px; } .v2-wallet-illus { position: absolute; right: 6px; top: 12px; width: 132px; opacity: 1; pointer-events: none; } /* white "Fund Wallet" pill that sits on the orange card */ .v2-fund-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--v2-brand-strong); font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: var(--v2-pill); border: 0; box-shadow: 0 6px 14px rgba(0,0,0,.12); } /* ----------------------------------------------------- quick action row */ .wallet-inline-button { display: flex; justify-content: space-between; gap: 8px; } .wallet-inline-button .item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; color: inherit; } .wallet-inline-button .item .iconbox { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.30); color: #fff; font-size: 22px; } .wallet-inline-button .item strong { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.95); } /* quick actions on the light dashboard card */ .v2-quick-row { display: flex; justify-content: space-between; gap: 8px; } .v2-quick-row .v2-quick { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; color: var(--v2-ink); text-decoration: none; background: #fff; border-radius: 16px; box-shadow: 0 6px 14px rgba(20,24,40,.10); padding: 12px 4px 10px; } .v2-quick .v2-quick-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: var(--v2-brand-soft); color: var(--v2-brand); border: 0; box-shadow: none; } .v2-quick strong { font-size: 10.5px; font-weight: 600; color: var(--v2-ink); text-align: center; } /* ------------------------------------------------------- service tiles grid */ .services-section .section-heading, .v2-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .services-section .section-heading .title, .v2-section-heading .title { font-size: 16px; font-weight: 800; color: var(--v2-ink); margin: 0; } #see-all-services, .v2-see-all { color: var(--v2-brand) !important; font-size: 13px; font-weight: 700; cursor: pointer; } .services-section .item { position: relative; } .services-section .item a { display: flex; flex-direction: column; align-items: center; gap: 9px; background: #fff; border-radius: 18px; box-shadow: 0 6px 16px rgba(20,24,40,.08); padding: 14px 6px 12px; text-align: center; transition: transform .12s ease, box-shadow .12s ease; } .services-section .item a:active { transform: scale(.97); } .services-section .item .icon-wrapper { width: 46px; height: 46px; margin: 0; border-radius: 50%; display: grid; place-items: center; background: var(--v2-brand-soft); color: var(--v2-brand); font-size: 22px; border: 0; box-shadow: none; } .services-section .item .icon-title { font-size: 11px; font-weight: 600; color: var(--v2-ink-2); display: block; } .services-section .item .badge.badge-danger { position: absolute; top: -6px; right: 8px; z-index: 2; background: var(--v2-danger); font-size: 9px; font-weight: 700; border-radius: var(--v2-pill); padding: 3px 7px; } /* --------------------------------------------------------- promo banner */ .v2-promo { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #FFEFE0 0%, #FFE0C7 100%); border: 1px solid #FFD9B8; border-radius: var(--v2-radius); padding: 14px; position: relative; overflow: hidden; } .v2-promo .v2-promo-body { flex: 1; min-width: 0; } .v2-promo .v2-promo-title { font-size: 13px; font-weight: 800; color: var(--v2-brand-strong); } .v2-promo .v2-promo-sub { font-size: 12px; color: var(--v2-ink-2); margin-top: 2px; } .v2-promo img { width: 72px; flex: 0 0 auto; } /* --------------------------------------------------------- trust strip */ .v2-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 14px; background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; box-shadow: var(--v2-shadow-sm); overflow: hidden; } .v2-trust .v2-trust-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 6px; border-right: 1px solid var(--v2-line); } .v2-trust .v2-trust-item:last-child { border-right: 0; } .v2-trust .v2-trust-item i { color: var(--v2-brand); font-size: 19px; } .v2-trust .v2-trust-item span { font-size: 9.5px; font-weight: 600; color: var(--v2-muted); line-height: 1.2; } /* --------------------------------------------------------------- buttons */ .btn-primary, .v2-btn { background: var(--v2-brand-grad) !important; border: 0 !important; border-radius: var(--v2-pill) !important; font-weight: 700 !important; padding: 13px 18px !important; box-shadow: var(--v2-shadow-brand); color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .v2-btn:hover { filter: brightness(1.02); } .btn-primary:active, .v2-btn:active { transform: translateY(1px); } .v2-btn-block { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; } .btn-outline-primary, .v2-btn-outline { background: #fff !important; border: 1.5px solid var(--v2-line-strong) !important; border-radius: var(--v2-pill) !important; color: var(--v2-ink) !important; font-weight: 700 !important; padding: 12px 16px !important; } .v2-btn-outline.is-brand { border-color: var(--v2-brand) !important; color: var(--v2-brand-strong) !important; } /* ----------------------------------------------------------------- forms */ .form-control, .input-wrapper, .nice-select { border: 1.5px solid var(--v2-line-strong) !important; border-radius: var(--v2-radius-sm) !important; background: var(--v2-surface) !important; min-height: 50px; color: var(--v2-ink) !important; font-size: 14px; box-shadow: none; } .form-control:focus, .input-wrapper:focus-within, .nice-select:focus { border-color: var(--v2-brand) !important; box-shadow: 0 0 0 3px rgba(255,109,0,.12) !important; } /* An input INSIDE an .input-wrapper shares the wrapper's border — it must not draw its own, or you get a box-in-a-box (the wrapper provides the frame). */ .input-wrapper .form-control, .input-wrapper input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 0 !important; border-radius: 0 !important; height: 100%; } .input-wrapper .form-control:focus, .input-wrapper input:focus { border: 0 !important; box-shadow: none !important; } .form-label, .v2-label { font-size: 12.5px; font-weight: 600; color: var(--v2-ink-2); margin-bottom: 6px; } /* labelled select (icon + text + chevron) used on buy/boost/airtime screens */ .v2-select { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; background: var(--v2-surface); border: 1.5px solid var(--v2-line-strong); border-radius: var(--v2-radius-sm); color: var(--v2-ink); font-weight: 600; cursor: pointer; } .v2-select .v2-select-ic { color: var(--v2-brand); font-size: 20px; } .v2-select .v2-select-text { flex: 1; } .v2-select .v2-select-text small { display: block; font-size: 10px; font-weight: 600; color: var(--v2-muted); text-transform: uppercase; letter-spacing: .4px; } .v2-select .v2-select-caret { color: var(--v2-muted); } /* quick-amount chips */ .v2-chips { display: flex; flex-wrap: wrap; gap: 10px; } .v2-chips .v2-chip { padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--v2-line-strong); background: var(--v2-surface); font-weight: 700; font-size: 13px; color: var(--v2-ink); cursor: pointer; } .v2-chips .v2-chip.is-active { border-color: var(--v2-brand); color: var(--v2-brand-strong); background: var(--v2-brand-soft); } /* ---------------------------------------------------------- segmented tabs */ .v2-tabs { display: flex; gap: 8px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-pill); padding: 5px; } .v2-tabs .v2-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border-radius: var(--v2-pill); font-size: 12.5px; font-weight: 700; color: var(--v2-muted); cursor: pointer; white-space: nowrap; } .v2-tabs .v2-tab.is-active { background: var(--v2-brand-soft); color: var(--v2-brand-strong); } /* social/platform icon row (boost-socials) */ .v2-iconrow { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 4px; } .v2-iconrow .v2-iconrow-item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--v2-muted); font-size: 11px; font-weight: 600; flex: 0 0 auto; } .v2-iconrow .v2-iconrow-item.is-active { color: var(--v2-brand-strong); } .v2-iconrow .v2-iconrow-item.is-active::after { content: ""; width: 20px; height: 3px; border-radius: 3px; background: var(--v2-brand); } /* ----------------------------------------------------------- list rows */ .v2-list { display: flex; flex-direction: column; gap: 10px; } .v2-row { display: flex; align-items: center; gap: 12px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-radius-sm); padding: 12px; text-decoration: none; color: var(--v2-ink); } .v2-row .v2-row-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: var(--v2-brand-soft); color: var(--v2-brand); } .v2-row .v2-row-main { flex: 1; min-width: 0; } .v2-row .v2-row-title { font-size: 13.5px; font-weight: 700; margin: 0; } .v2-row .v2-row-sub { font-size: 11px; color: var(--v2-muted); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-row .v2-row-end { text-align: right; flex: 0 0 auto; } .v2-row .v2-row-amt { font-size: 13.5px; font-weight: 800; } .v2-row .v2-row-amt.credit { color: var(--v2-ok); } .v2-row .v2-row-amt.debit { color: var(--v2-danger); } /* status badges */ .v2-status { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--v2-pill); } .v2-status.ok { background: var(--v2-ok-bg); color: var(--v2-ok); } .v2-status.pending { background: var(--v2-warn-bg); color: var(--v2-warn); } .v2-status.failed { background: var(--v2-danger-bg); color: var(--v2-danger); } /* label/value rows for detail screens */ .v2-kv { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--v2-line); } .v2-kv:last-child { border-bottom: 0; } .v2-kv .v2-kv-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--v2-brand-soft); color: var(--v2-brand); font-size: 16px; } .v2-kv .v2-kv-label { flex: 1; color: var(--v2-muted); font-size: 13px; } .v2-kv .v2-kv-val { font-weight: 700; font-size: 13px; color: var(--v2-ink); } /* --------------------------------------------------------- empty state */ .v2-empty, .transactions-empty { text-align: center; padding: 26px 16px; } .v2-empty img, .transactions-empty img { width: 120px; margin: 0 auto 12px; display: block; } .v2-empty p, .transactions-empty p { color: var(--v2-muted); font-size: 13px; margin: 0; } /* --------------------------------------------------------- bottom sheet */ .v2-sheet .modal-content, .modal.action-sheet .modal-content { border-radius: 24px 24px 0 0; border: 0; } .v2-sheet-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--v2-line-strong); margin: 10px auto 4px; } /* --------------------------------------------------------- bottom nav */ .appBottomMenu { max-width: 456px; margin: 0 auto; left: 12px; right: 12px; bottom: 10px; position: fixed; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 24px; box-shadow: 0 12px 30px rgba(20,24,40,.16); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); height: auto; } .appBottomMenu .item { color: var(--v2-muted); } .appBottomMenu .item .col { display: flex; flex-direction: column; align-items: center; gap: 3px; } .appBottomMenu .item .col i, .appBottomMenu .item .col ion-icon { font-size: 21px; padding: 5px 16px; border-radius: 999px; display: inline-block; transition: background .15s ease, color .15s ease; } .appBottomMenu .item strong { font-size: 10px; font-weight: 600; margin-top: 1px; } .appBottomMenu .item.active { color: var(--v2-brand); } .appBottomMenu .item.active strong { color: var(--v2-brand); font-weight: 700; } .appBottomMenu .item.active .col i, .appBottomMenu .item.active .col ion-icon { color: var(--v2-brand); } /* --------------------------------------------------------- telegram FAB */ .telegram-float .telegram-icon { background: var(--v2-brand-grad); box-shadow: var(--v2-shadow-brand); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,109,0,.45); } 80% { box-shadow: 0 0 0 14px rgba(255,109,0,0); } } /* ---------------------------------------------- recharge / virtual account */ .v2-rc-card { background:#fff; border:1px solid var(--v2-line); border-radius:var(--v2-radius); box-shadow:var(--v2-shadow); padding:22px 18px; margin-top:8px; } .v2-rc-brand { text-align:center; margin-bottom:18px; } .v2-rc-brand img { height:40px; margin-bottom:10px; } .v2-rc-title { font-size:19px; font-weight:800; color:var(--v2-ink); } .v2-rc-sub { font-size:12.5px; color:var(--v2-muted); margin-top:3px; } .v2-rc-field { margin-bottom:14px; } .v2-rc-label { font-size:12px; font-weight:600; color:var(--v2-muted); margin-bottom:7px; } .v2-rc-box { display:flex; align-items:center; gap:10px; background:var(--v2-surface-2); border:1.5px solid var(--v2-line-strong); border-radius:13px; padding:0 12px; min-height:54px; } .v2-rc-ic { color:var(--v2-brand); font-size:19px; flex:0 0 auto; } .v2-rc-val { flex:1; font-weight:700; color:var(--v2-ink); font-size:14px; min-width:0; word-break:break-word; } .v2-rc-acct { font-size:18px; letter-spacing:.5px; } .v2-rc-copy { display:inline-flex; align-items:center; gap:5px; background:var(--v2-brand-soft); color:var(--v2-brand-strong); border:1px solid rgba(255,109,0,.25); border-radius:10px; padding:8px 13px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; flex:0 0 auto; } .v2-rc-copy:active { transform:translateY(1px); } .v2-rc-note { display:flex; gap:9px; background:var(--v2-peach); border:1px solid rgba(255,138,30,.22); border-radius:13px; padding:12px; font-size:12px; color:#9a5b1e; line-height:1.5; margin-top:4px; } .v2-rc-note i { color:var(--v2-brand); font-size:16px; flex:0 0 auto; margin-top:1px; } body.dark-mode .v2-rc-note { color:#fdba74; } .v2-rc-back { background:none; border:0; color:var(--v2-muted); font-size:22px; cursor:pointer; padding:0; margin-bottom:4px; display:inline-flex; } /* recharge method list (shown first; user picks a method) */ #walletMethodsList { padding:0; margin-top:8px; } #walletMethodsList li { list-style:none; margin-bottom:12px; } #walletMethodsList .item { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--v2-line); border-radius:16px; padding:14px; box-shadow:var(--v2-shadow-sm); text-decoration:none; color:var(--v2-ink); } #walletMethodsList .item .image { width:48px; height:48px; border-radius:13px; object-fit:contain; background:var(--v2-brand-soft); padding:8px; flex:0 0 auto; } #walletMethodsList .item .in { width:100%; min-width:0; } #walletMethodsList .item .in strong { font-size:14px; font-weight:700; color:var(--v2-ink); display:block; } #walletMethodsList .item .in p { font-size:12px; color:var(--v2-muted); margin:2px 0 0; } #walletMethodsList .item::after { content:""; flex:0 0 auto; margin-left:auto; width:8px; height:8px; border-top:2px solid var(--v2-line-strong); border-right:2px solid var(--v2-line-strong); transform:rotate(45deg); } /* ============================================================ DARK MODE */ body.dark-mode { --v2-bg: #0B0F1A; --v2-surface: #121829; --v2-surface-2: #0F1422; --v2-peach: #1B2230; --v2-ink: rgba(255,255,255,.92); --v2-ink-2: rgba(255,255,255,.78); --v2-muted: rgba(255,255,255,.55); --v2-line: rgba(255,255,255,.08); --v2-line-strong: rgba(255,255,255,.14); --v2-brand-soft: rgba(255,109,0,.16); } body.dark-mode { background: var(--v2-bg); color: var(--v2-ink); } body.dark-mode::before { opacity: .5; } body.dark-mode .v2-wallet-light { background: linear-gradient(135deg, #1c2433 0%, #161d2b 100%); border-color: var(--v2-line-strong); } body.dark-mode .v2-wallet-light .v2-wallet-amount { color: #fff; } body.dark-mode .form-control, body.dark-mode .input-wrapper, body.dark-mode .nice-select, body.dark-mode .v2-select { background: var(--v2-surface) !important; } /* ===================================================================== BUY NUMBER — matches _design-refs/buy-number.PNG ===================================================================== */ /* header bell */ .appHeader .right .headerButton { color: var(--v2-ink); font-size: 22px; } /* ---- orange-gradient wallet card ---- */ .v2-bn-wallet { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--v2-brand-grad); border-radius: var(--v2-radius-sm); box-shadow: var(--v2-shadow-brand); padding: 16px 18px; } .v2-bn-wallet-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .v2-bn-wallet-label { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.92); } .v2-bn-wallet-amt { display: flex; align-items: center; gap: 9px; } .v2-bn-wallet-amt .amt { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.3px; } .v2-bn-wallet-amt .v2-bn-eye { color: rgba(255,255,255,.92); font-size: 18px; cursor: pointer; } .v2-blur { filter: blur(8px); transition: filter .15s ease; user-select: none; } .v2-bn-fund { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--v2-brand-strong); font-weight: 700; font-size: 13px; padding: 11px 16px; border-radius: 12px; box-shadow: 0 6px 14px rgba(0,0,0,.12); text-decoration: none; white-space: nowrap; } .v2-bn-fund:active { transform: scale(.97); } /* ---- tabs (flag + label, orange active underline) ---- */ #appCapsule .nav-tabs.lined { display: flex; gap: 4px; background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; padding: 5px; box-shadow: var(--v2-shadow-sm); margin: 16px 0; list-style: none; } #appCapsule .nav-tabs.lined .nav-item { flex: 1; margin: 0; } #appCapsule .nav-tabs.lined .nav-link { display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; font-size: 12px; font-weight: 600; color: var(--v2-muted); padding: 9px 4px 11px !important; border: 0 !important; border-radius: 11px; background: transparent; text-align: center; line-height: 1.1; height: auto !important; } #appCapsule .nav-tabs.lined .nav-link.active { color: var(--v2-brand); background: transparent; } #appCapsule .nav-tabs.lined .nav-link.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 2px; width: 46%; height: 3px; border-radius: 3px; background: var(--v2-brand); } .v2-bn-tabflag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; flex: 0 0 auto; } #appCapsule .nav-tabs.lined .nav-link i { font-size: 15px; } /* ---- icon-prefixed select fields ---- */ .v2-bn-field { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; padding: 11px 14px; box-shadow: var(--v2-shadow-sm); margin-bottom: 12px; } .v2-bn-field-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: var(--v2-brand-soft); color: var(--v2-brand); display: grid; place-items: center; font-size: 20px; } .v2-bn-field-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .v2-bn-field-label { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--v2-muted); } /* tame nice-select so it blends into the field (value lives in .current) */ .v2-bn-field .nice-select { border: 0 !important; background: transparent !important; box-shadow: none !important; height: auto !important; min-height: 22px; line-height: 1.35 !important; padding: 0 24px 0 0 !important; margin: 0 !important; float: none !important; width: 100% !important; font-size: 15px; font-weight: 600; } .v2-bn-field .nice-select, .v2-bn-field .nice-select .current, .v2-bn-field .nice-select.disabled, .v2-bn-field .nice-select.disabled .current { color: var(--v2-ink) !important; } .v2-bn-field .nice-select .current { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-bn-field .nice-select::after { right: 2px; width: 7px; height: 7px; border-color: var(--v2-muted) !important; margin-top: -5px; } .v2-bn-field .nice-select .nice-select-dropdown { width: 100%; left: 0 !important; right: auto; background: #fff; border: 1px solid var(--v2-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(20,24,40,.16); margin-top: 8px; } .v2-bn-field .nice-select .list { width: 100%; max-height: 240px; } .v2-bn-field .nice-select .option { padding-left: 16px; } /* ---- purchase button ---- */ .v2-bn-purchase { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; font-weight: 700; font-size: 15px; border-radius: 14px; padding: 18px 16px; } .v2-bn-purchase .v2-bn-purchase-arrow { position: absolute; right: 14px; font-size: 20px; } /* ---- active-numbers header accent ---- */ .sms-card-title:has(.v2-bn-active-ic) { display: flex; align-items: center; gap: 9px; } .v2-bn-active-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--v2-brand-soft); color: var(--v2-brand); font-size: 17px; } /* active count badge — soft-orange bg, deep-orange number */ #active-counter { background: var(--v2-brand-soft) !important; color: var(--v2-brand) !important; border: 1px solid rgba(255,109,0,.20) !important; font-weight: 800; } /* sms-style table heads — soft-orange instead of gray (all v2 history/number tables) */ .sms-table thead th { background: var(--v2-brand-soft) !important; color: var(--v2-brand-strong) !important; border-bottom-color: rgba(255,109,0,.18) !important; } /* ---- empty state (clipboard illustration) ---- */ .sms-empty .v2-bn-empty-img { width: 92px; height: auto; margin: 4px auto 12px; display: block; } .sms-empty .v2-bn-empty-title { font-size: 15px; font-weight: 700; color: var(--v2-ink); } .sms-empty .v2-bn-empty-sub { font-size: 12.5px; color: var(--v2-muted); margin-top: 3px; } body.dark-mode .v2-bn-field { background: var(--v2-surface) !important; border-color: var(--v2-line-strong); } body.dark-mode #appCapsule .nav-tabs.lined { background: var(--v2-surface); border-color: var(--v2-line-strong); } /* ===================================================================== NUMBER HISTORY (numbers.php) — mirrors the buy-number "numbers" language ===================================================================== */ .v2-nh-head { margin-bottom: 14px; } .v2-nh-filter { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 16px; } .v2-nh-filter .sms-search-field { grid-column: 1 / -1; flex: none; min-width: 0; } .v2-nh-select { height: 44px; border-radius: 12px; border: 1px solid var(--v2-line); background: #fff; color: var(--v2-ink); padding: 0 12px; font-size: 13px; font-weight: 600; font-family: inherit; min-width: 0; } .v2-nh-select:focus { outline: 0; border-color: var(--v2-brand); box-shadow: 0 0 0 3px rgba(255,109,0,.15); } .v2-nh-btn { height: 44px; border-radius: 12px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-weight: 700; font-size: 13px; } body.dark-mode .v2-nh-select { background: var(--v2-surface); border-color: var(--v2-line-strong); } /* ---- pagination (shared partial) on-theme ---- */ .pagination .page-link { color: var(--v2-ink); border-color: var(--v2-line); } .pagination .page-link:hover { background: var(--v2-brand-soft); color: var(--v2-brand-strong); border-color: var(--v2-brand-soft); } .pagination .page-item.active .page-link { background: var(--v2-brand); border-color: var(--v2-brand); color: #fff; } .pagination .page-text { color: var(--v2-muted); } /* ===================================================================== MERGED TRANSACTION HISTORY (transactions.php) — combined_transaction_history.PNG ===================================================================== */ /* date-range + filter bar */ .v2-tx-rangebar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .v2-tx-range { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--v2-line); border-radius: 12px; padding: 9px 12px; box-shadow: var(--v2-shadow-sm); } .v2-tx-range > i { color: var(--v2-brand); font-size: 17px; flex: 0 0 auto; } .v2-tx-range input { border: 0; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--v2-ink); min-width: 0; flex: 1; outline: none; padding: 0; cursor: pointer; } .v2-tx-range input::placeholder { color: var(--v2-muted); font-weight: 600; } .v2-tx-range-sep { color: var(--v2-muted); flex: 0 0 auto; } .v2-tx-range-caret { color: var(--v2-muted); font-size: 17px; flex: 0 0 auto; } /* daterangepicker — themed to v2 (used on transactions.php) */ .daterangepicker { font-family: var(--v2-font); border: 1px solid var(--v2-line); border-radius: 14px; box-shadow: var(--v2-shadow-md); } .daterangepicker::before, .daterangepicker::after { display: none; } /* NOTE: daterangepicker.css loads after theme-v2.css, so these need !important to win */ .daterangepicker .ranges li.active { background-color: var(--v2-brand) !important; color: #fff !important; } .daterangepicker .ranges li:hover { background-color: var(--v2-brand-soft) !important; color: var(--v2-brand-strong) !important; } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--v2-brand) !important; border-color: transparent !important; color: #fff !important; } .daterangepicker td.in-range { background-color: var(--v2-brand-soft) !important; border-color: transparent !important; color: var(--v2-ink) !important; border-radius: 0 !important; } .daterangepicker td.available:hover, .daterangepicker th.available:hover { background-color: var(--v2-brand-soft-2) !important; } .daterangepicker .drp-buttons .btn { border-radius: 9px; font-weight: 700; font-size: 12px; } .daterangepicker .drp-buttons .applyBtn { background-color: var(--v2-brand) !important; border-color: var(--v2-brand) !important; color: #fff !important; } .daterangepicker .drp-buttons .cancelBtn { color: var(--v2-muted); } .daterangepicker .drp-selected { font-size: 11px; color: var(--v2-muted); } @media (max-width: 560px) { .daterangepicker { width: auto; max-width: 94vw; } .daterangepicker.show-calendar .ranges { float: none; } .daterangepicker .drp-calendar { max-width: 100%; float: none; } .daterangepicker .ranges ul { width: 100%; } } body.dark-mode .daterangepicker, body.dark-mode .daterangepicker .calendar-table { background: var(--v2-surface); border-color: var(--v2-line-strong); color: #fff; } body.dark-mode .daterangepicker td.off { background: var(--v2-surface); color: var(--v2-muted); } .v2-tx-filterbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--v2-brand-soft); color: var(--v2-brand-strong); border: 1px solid rgba(255,109,0,.22); border-radius: 12px; padding: 0 15px; height: 42px; font-weight: 700; font-size: 13px; cursor: pointer; } .v2-tx-filterbtn:active { transform: translateY(1px); } /* summary band */ .v2-tx-summary { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; box-shadow: var(--v2-shadow-sm); padding: 14px 8px; margin-bottom: 16px; } .v2-tx-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 0 6px; border-right: 1px solid var(--v2-line); } .v2-tx-stat:last-child { border-right: 0; } .v2-tx-stat-label { font-size: 10.5px; color: var(--v2-muted); font-weight: 600; } .v2-tx-stat-val { font-size: 15px; font-weight: 800; color: var(--v2-ink); letter-spacing: -.2px; } .v2-tx-stat-val.red { color: var(--v2-danger); } .v2-tx-stat-val.green { color: var(--v2-ok); } /* transaction list */ .v2-tx-list { display: flex; flex-direction: column; gap: 10px; } .v2-tx-item { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; padding: 12px 30px 12px 13px; box-shadow: var(--v2-shadow-sm); text-decoration: none; color: inherit; } .v2-tx-item:active { transform: scale(.995); } .v2-tx-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 20px; } .v2-tx-main { flex: 1; min-width: 0; } .v2-tx-title { font-size: 14px; font-weight: 700; color: var(--v2-ink); } .v2-tx-sub { font-size: 11.5px; color: var(--v2-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .v2-tx-date { font-size: 11px; color: var(--v2-muted); margin-top: 2px; } .v2-tx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; text-align: right; } .v2-tx-amt { font-size: 13.5px; font-weight: 800; white-space: nowrap; } .v2-tx-amt.red { color: var(--v2-danger); } .v2-tx-amt.green { color: var(--v2-ok); } .v2-tx-amt.refunded { color: var(--v2-muted); } /* "Refunded" badge (distinct from Failed) */ .sms-badge-refund { background: var(--v2-info-bg); color: var(--v2-info); border: 1px solid rgba(79,70,229,.18); } .v2-tx-chev { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--v2-line-strong); font-size: 20px; } /* type tints (icon bubble) */ .v2-tx-orange { background: #FFF3E9; color: #FF6D00; } .v2-tx-indigo { background: #EEF0FF; color: #4F46E5; } .v2-tx-blue { background: #E8F2FF; color: #2563EB; } .v2-tx-amber { background: #FFF6E0; color: #D97706; } .v2-tx-pink { background: #FFE9F1; color: #EC4899; } .v2-tx-sky { background: #E3F4FD; color: #0EA5E9; } .v2-tx-teal { background: #E2F7F2; color: #0D9488; } .v2-tx-green { background: #E9F8EF; color: #16A34A; } .v2-tx-gray { background: #F1F2F5; color: #6B7280; } /* load more */ .v2-tx-more { text-align: center; margin: 16px 0 4px; } .v2-tx-more a { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-brand); font-weight: 700; font-size: 13px; text-decoration: none; } body.dark-mode .v2-tx-range, body.dark-mode .v2-tx-summary, body.dark-mode .v2-tx-item { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-tx-range input[type="date"] { color: #fff; } /* ===================================================================== TRANSACTION DETAILS (transaction-details.php) — more_details_on_transaction.PNG ===================================================================== */ .v2-td-top { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--v2-line); border-radius: 18px; padding: 16px; box-shadow: var(--v2-shadow-sm); margin-bottom: 14px; } .v2-td-top .v2-tx-ic { width: 50px; height: 50px; font-size: 23px; } .v2-td-top-main { flex: 1; min-width: 0; } .v2-td-top-title { font-size: 16px; font-weight: 800; color: var(--v2-ink); } .v2-td-top-ref { font-size: 11.5px; color: var(--v2-muted); margin-top: 3px; display: inline-flex; align-items: center; gap: 6px; } .v2-td-copy { cursor: pointer; color: var(--v2-brand); } .v2-td-top-right { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; } .v2-td-top-amt { font-size: 18px; font-weight: 800; color: var(--v2-ink); } .v2-td-card { background: #fff; border: 1px solid var(--v2-line); border-radius: 18px; padding: 6px 16px; box-shadow: var(--v2-shadow-sm); margin-bottom: 14px; } .v2-td-card-title { font-size: 13px; font-weight: 800; color: var(--v2-ink); padding: 12px 0 4px; } .v2-td-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--v2-line); } .v2-td-row:last-child { border-bottom: 0; } .v2-td-row-ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; background: var(--v2-brand-soft); color: var(--v2-brand); display: grid; place-items: center; font-size: 16px; } .v2-td-row-label { flex: 1; min-width: 0; font-size: 13px; color: var(--v2-muted); } .v2-td-row-val { font-size: 13px; font-weight: 700; color: var(--v2-ink); text-align: right; word-break: break-word; } .v2-td-row-val.green { color: var(--v2-ok); } .v2-td-break-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--v2-line); font-size: 13px; } .v2-td-break-row:last-child { border-bottom: 0; } .v2-td-break-row .lbl { color: var(--v2-muted); } .v2-td-break-row .val { font-weight: 700; color: var(--v2-ink); } .v2-td-break-row.total .val { color: var(--v2-ok); font-weight: 800; } .v2-td-help { display: flex; align-items: center; gap: 12px; background: var(--v2-brand-soft); border: 1px solid rgba(255,109,0,.16); border-radius: 16px; padding: 14px; } .v2-td-help-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: #fff; color: var(--v2-brand); display: grid; place-items: center; font-size: 20px; } .v2-td-help-txt { flex: 1; min-width: 0; } .v2-td-help-txt b { font-size: 13px; color: var(--v2-ink); } .v2-td-help-txt p { font-size: 11.5px; color: var(--v2-muted); margin: 2px 0 0; } .v2-td-help-btn { flex: 0 0 auto; background: #fff; color: var(--v2-brand-strong); border: 1px solid rgba(255,109,0,.30); border-radius: 10px; padding: 9px 13px; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; } body.dark-mode .v2-td-top, body.dark-mode .v2-td-card { background: var(--v2-surface); border-color: var(--v2-line-strong); } /* ===================================================================== PROFILE (profile.php) — profile.PNG ===================================================================== */ /* stacked page header (title + subtitle next to the back arrow) */ .v2-pf-head { line-height: 1.15; margin-left: 12px; } .v2-pf-head-title { font-size: 19px; font-weight: 800; color: var(--v2-ink); } .v2-pf-head-sub { font-size: 12.5px; color: var(--v2-muted); margin-top: 2px; } /* ---- hero identity card ---- */ .v2-pf-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #FFF3E9 0%, #FFE7D2 100%); border: 1px solid rgba(255,109,0,.16); border-radius: 20px; padding: 16px; box-shadow: var(--v2-shadow-sm); margin: 6px 0 16px; } .v2-pf-hero::after { content: ""; position: absolute; top: -40px; right: -30px; width: 150px; height: 150px; border-radius: 50%; border: 22px solid rgba(255,109,0,.07); pointer-events: none; } .v2-pf-hero-av { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #15171F; color: var(--v2-brand); font-size: 24px; font-weight: 800; line-height: 1; box-shadow: 0 4px 12px rgba(20,24,40,.18); position: relative; z-index: 1; } .v2-pf-hero-main { flex: 1; min-width: 0; position: relative; z-index: 1; } .v2-pf-hero-name { display: flex; align-items: center; font-size: 17px; font-weight: 800; color: var(--v2-ink); } .v2-pf-hero-name .verified-badge-btn { box-shadow: 0 0 0 2px rgba(255,255,255,.6); } .v2-pf-hero-pill { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 11px; border-radius: var(--v2-pill); font-size: 11px; font-weight: 700; letter-spacing: .2px; background: var(--v2-brand); color: #fff; box-shadow: 0 4px 10px rgba(255,109,0,.28); } .v2-pf-hero-pill.muted { background: #fff; color: var(--v2-muted); border: 1px solid var(--v2-line-strong); box-shadow: none; } .v2-pf-hero-since { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--v2-muted); } .v2-pf-hero-since i { font-size: 14px; } /* ---- section cards ---- */ .v2-pf-card { background: #fff; border: 1px solid var(--v2-line); border-radius: 20px; padding: 18px 16px; box-shadow: var(--v2-shadow-sm); margin-bottom: 16px; } .v2-pf-cardhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .v2-pf-cardhead-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: var(--v2-brand-soft); color: var(--v2-brand); } .v2-pf-cardhead-ic.lock { background: var(--v2-info-bg); color: var(--v2-info); } .v2-pf-cardhead-title { font-size: 15px; font-weight: 800; color: var(--v2-ink); line-height: 1.2; } .v2-pf-cardhead-sub { font-size: 12.5px; color: var(--v2-muted); margin-top: 2px; } /* ---- fields ---- */ .v2-pf-field { margin-bottom: 14px; } .v2-pf-field:last-of-type { margin-bottom: 0; } .v2-pf-label { display: block; font-size: 13px; font-weight: 600; color: var(--v2-ink-2); margin-bottom: 7px; } .v2-pf-input { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--v2-line-strong); border-radius: 13px; height: 52px; padding: 0 13px; transition: border-color .15s ease, box-shadow .15s ease; } .v2-pf-input:focus-within { border-color: var(--v2-brand); box-shadow: 0 0 0 3px rgba(255,109,0,.12); } .v2-pf-input > i.lead { font-size: 18px; color: var(--v2-muted); flex: 0 0 auto; } .v2-pf-input input { border: 0; outline: 0; background: transparent; width: 100%; height: 100%; font-size: 14px; color: var(--v2-ink); font-family: inherit; } .v2-pf-input input::placeholder { color: #B4B9C4; } .v2-pf-input.is-readonly { background: #FAFAFB; } .v2-pf-input.is-readonly input { color: var(--v2-ink-2); } .v2-pf-eye { font-size: 18px; color: var(--v2-muted); cursor: pointer; flex: 0 0 auto; } /* ---- buttons ---- */ .v2-pf-save { width: 100%; height: 52px; margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 13px; background: var(--v2-brand-grad); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; box-shadow: var(--v2-shadow-brand); cursor: pointer; } .v2-pf-save:disabled { opacity: .7; cursor: default; } .v2-pf-update { position: relative; width: 100%; height: 52px; margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--v2-brand-strong); border: 1.5px solid rgba(255,109,0,.40); border-radius: 13px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; } .v2-pf-update:disabled { opacity: .7; cursor: default; } .v2-pf-update > i { position: absolute; right: 16px; font-size: 19px; } /* ---- dark mode ---- */ body.dark-mode .v2-pf-hero { background: linear-gradient(135deg, rgba(255,138,30,.10), rgba(255,109,0,.05)); border-color: rgba(255,255,255,.10); } body.dark-mode .v2-pf-hero-name { color: #fff; } body.dark-mode .v2-pf-card { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-pf-cardhead-title { color: #fff; } body.dark-mode .v2-pf-input { background: #0f1422; border-color: rgba(255,255,255,.14); } body.dark-mode .v2-pf-input.is-readonly { background: #0b0f1a; } body.dark-mode .v2-pf-input input { color: #fff; } body.dark-mode .v2-pf-update { background: var(--v2-surface); } /* ===================================================================== PROFILE-MAIN — account / settings hub ===================================================================== */ /* hero re-used from .v2-pf-hero, made tappable with a trailing chevron */ .v2-pf-hero.is-link { text-decoration: none; } .v2-pf-hero-go { margin-left: auto; flex: 0 0 auto; color: var(--v2-brand); font-size: 22px; position: relative; z-index: 1; } .v2-pf-hero-edit { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--v2-brand-strong); } .v2-acc-group { margin-bottom: 18px; } .v2-acc-label { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; color: var(--v2-muted); text-transform: uppercase; margin: 0 4px 8px; } .v2-acc-card { background: #fff; border: 1px solid var(--v2-line); border-radius: 18px; overflow: hidden; box-shadow: var(--v2-shadow-sm); } .v2-acc-row { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-bottom: 1px solid var(--v2-line); text-decoration: none; color: var(--v2-ink); transition: background .12s ease; } .v2-acc-row:last-child { border-bottom: 0; } .v2-acc-row:active { background: var(--v2-surface-2); } .v2-acc-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: var(--v2-brand-soft); color: var(--v2-brand); } .v2-acc-ic.green { background: var(--v2-ok-bg); color: var(--v2-ok); } .v2-acc-ic.blue { background: #E7F2FF; color: #2563EB; } .v2-acc-ic.indigo { background: var(--v2-info-bg); color: var(--v2-info); } .v2-acc-ic.amber { background: var(--v2-warn-bg); color: var(--v2-warn); } .v2-acc-ic.pink { background: #FDE8F3; color: #DB2777; } .v2-acc-ic.sky { background: #E6F6FB; color: #0891B2; } .v2-acc-ic.teal { background: #E6F7F1; color: #0D9488; } .v2-acc-ic.red { background: var(--v2-danger-bg); color: var(--v2-danger); } .v2-acc-main { flex: 1; min-width: 0; } .v2-acc-title { font-size: 14px; font-weight: 600; color: var(--v2-ink); } .v2-acc-sub { font-size: 11.5px; color: var(--v2-muted); margin-top: 1px; } .v2-acc-chev { flex: 0 0 auto; color: var(--v2-muted); font-size: 18px; } .v2-acc-row.danger .v2-acc-title { color: var(--v2-danger); } body.dark-mode .v2-acc-card { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-acc-row { border-bottom-color: var(--v2-line-strong); } body.dark-mode .v2-acc-title { color: #fff; } /* ===================================================================== BILL PAYMENTS / VTU — hub, airtime, data, cable, electricity, success refs: buy-airtime.PNG, data-slideup.PNG (cable/electricity/hub/success designed in the same language; no dedicated ref) ===================================================================== */ /* ---- hub service cards ---- */ .v2-vtu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .v2-vtu-svc { display: block; text-decoration: none; background: #fff; border: 1px solid var(--v2-line); border-radius: 18px; padding: 18px 16px; box-shadow: var(--v2-shadow-sm); transition: transform .12s ease, box-shadow .12s ease; } .v2-vtu-svc:active { transform: scale(.98); } .v2-vtu-svc-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; margin-bottom: 12px; background: var(--v2-brand-soft); color: var(--v2-brand); } .v2-vtu-svc-ic.green { background: var(--v2-ok-bg); color: var(--v2-ok); } .v2-vtu-svc-ic.indigo { background: var(--v2-info-bg); color: var(--v2-info); } .v2-vtu-svc-ic.sky { background: #E6F6FB; color: #0891B2; } .v2-vtu-svc-title { font-size: 15px; font-weight: 700; color: var(--v2-ink); } .v2-vtu-svc-sub { font-size: 12px; color: var(--v2-muted); margin-top: 3px; line-height: 1.35; } /* ---- wallet balance card ---- */ .v2-vtu-wallet { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, #FFF3E9 0%, #FFE7D2 100%); border: 1px solid rgba(255,109,0,.16); border-radius: 18px; padding: 16px; box-shadow: var(--v2-shadow-sm); margin-bottom: 18px; } .v2-vtu-wallet-label { font-size: 12.5px; font-weight: 600; color: var(--v2-brand-strong); } .v2-vtu-wallet-amt { font-size: 24px; font-weight: 800; color: var(--v2-ink); line-height: 1.1; margin-top: 2px; } .v2-vtu-fund { display: inline-flex; align-items: center; gap: 6px; background: var(--v2-brand-grad); color: #fff; border: 0; border-radius: 12px; padding: 11px 15px; font-size: 13.5px; font-weight: 700; text-decoration: none; box-shadow: var(--v2-shadow-brand); white-space: nowrap; } /* ---- selector + input row (network/provider + phone/smartcard/meter) ---- */ .v2-vtu-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--v2-line-strong); border-radius: 14px; padding: 9px 12px; min-height: 60px; box-shadow: var(--v2-shadow-sm); margin-bottom: 14px; } .v2-vtu-row:focus-within { border-color: var(--v2-brand); box-shadow: 0 0 0 3px rgba(255,109,0,.10); } .v2-vtu-selector { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; background: var(--v2-brand-soft); border: 1px solid rgba(255,109,0,.18); border-radius: 10px; padding: 6px 9px; cursor: pointer; } .v2-vtu-selector img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .v2-vtu-selector .name { font-size: 13px; font-weight: 600; color: var(--v2-ink); white-space: nowrap; } .v2-vtu-selector .caret { font-size: 15px; color: var(--v2-brand-strong); } .v2-vtu-divider { width: 1px; align-self: stretch; background: var(--v2-line); margin: 6px 2px; flex: 0 0 auto; } .v2-vtu-lead { font-size: 18px; color: var(--v2-muted); flex: 0 0 auto; } .v2-vtu-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--v2-ink); font-family: inherit; height: 42px; } .v2-vtu-input::placeholder { color: #B4B9C4; } /* ---- section label with bullet ---- */ .v2-vtu-seclabel { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--v2-ink); margin: 4px 2px 10px; } .v2-vtu-seclabel .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--v2-brand); color: #fff; display: grid; place-items: center; font-size: 11px; } /* ---- quick-amount chips ---- */ .v2-vtu-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; } .v2-vtu-chip { background: #fff; border: 1px solid var(--v2-line-strong); color: var(--v2-ink-2); border-radius: 11px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; } .v2-vtu-chip.active { background: var(--v2-brand); border-color: var(--v2-brand); color: #fff; box-shadow: var(--v2-shadow-brand); } /* ---- amount input with naira badge ---- */ .v2-vtu-amount { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--v2-line-strong); border-radius: 14px; padding: 8px 12px; min-height: 56px; box-shadow: var(--v2-shadow-sm); } .v2-vtu-amount:focus-within { border-color: var(--v2-brand); box-shadow: 0 0 0 3px rgba(255,109,0,.10); } .v2-vtu-naira { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--v2-brand-soft); color: var(--v2-brand); display: grid; place-items: center; font-weight: 800; font-size: 15px; } .v2-vtu-amount input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--v2-ink); font-family: inherit; height: 40px; } .v2-vtu-hint { font-size: 12px; color: var(--v2-muted); margin: 6px 2px 16px; } /* ---- closed picker (plan / provider / meter type) ---- */ .v2-vtu-picker { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--v2-line-strong); border-radius: 14px; padding: 16px 14px; cursor: pointer; box-shadow: var(--v2-shadow-sm); margin-bottom: 16px; font-size: 14px; font-weight: 500; color: var(--v2-ink); } .v2-vtu-picker .ri-arrow-down-s-line { color: var(--v2-muted); font-size: 20px; flex: 0 0 auto; } .v2-vtu-picker.disabled { opacity: .55; pointer-events: none; } .v2-vtu-picker .ph { color: var(--v2-muted); } .v2-vtu-picker > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- pay button ---- */ .v2-vtu-pay { width: 100%; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; background: var(--v2-brand-grad); color: #fff; font-size: 16px; font-weight: 700; font-family: inherit; box-shadow: var(--v2-shadow-brand); cursor: pointer; } .v2-vtu-pay:disabled { opacity: .5; box-shadow: none; cursor: default; } /* ---- slide-up option sheet (data-slideup.PNG): header pinned top, cards scroll, Cancel pinned bottom ---- */ .action-sheet .modal-content.v2-vtu-sheet { display: flex; flex-direction: column; max-height: 86vh; background: #fff; border-radius: 22px 22px 0 0; } .action-sheet .modal-content.v2-vtu-sheet .modal-header { flex: 0 0 auto; text-align: left; padding: 16px 16px 10px; } .action-sheet .modal-content.v2-vtu-sheet .modal-header .modal-title { text-align: left; font-size: 18px; font-weight: 800; color: var(--v2-ink); } .action-sheet .modal-content.v2-vtu-sheet .modal-body { flex: 1 1 auto; overflow-y: auto; padding: 2px 16px 10px; } .v2-vtu-sheet-sub { font-size: 12.5px; color: var(--v2-muted); margin: 3px 0 0; } .v2-vtu-sheet-foot { flex: 0 0 auto; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--v2-line); background: #fff; } .v2-vtu-sheet-cancel { display: block; width: 100%; text-align: center; padding: 14px; border: 0; border-radius: 13px; background: var(--v2-brand-soft); color: var(--v2-brand-strong); font-weight: 700; font-size: 15px; font-family: inherit; cursor: pointer; text-decoration: none; } .v2-vtu-sheet-cancel:active { background: var(--v2-brand-soft-2); } /* option cards inside the sheet */ .v2-vtu-sheetlist { list-style: none; margin: 0; padding: 0; } .v2-vtu-sheetlist li { padding: 0; border: 0; margin: 0; } .v2-vtu-bundle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 10px; text-decoration: none; color: var(--v2-ink); background: #fff; border: 1px solid var(--v2-line); border-radius: 14px; box-shadow: var(--v2-shadow-sm); } .v2-vtu-bundle:active { background: var(--v2-surface-2); } .v2-vtu-bundle-logo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .v2-vtu-bundle-main { flex: 1; min-width: 0; text-align: left; } .v2-vtu-bundle-title { font-size: 13.5px; font-weight: 600; color: var(--v2-ink); } .v2-vtu-bundle-sub { font-size: 11.5px; color: var(--v2-muted); margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; } .v2-vtu-bundle-price { font-size: 14px; font-weight: 800; color: var(--v2-ink); flex: 0 0 auto; white-space: nowrap; } .v2-vtu-bundle-chev { color: var(--v2-muted); font-size: 18px; flex: 0 0 auto; } /* ---- confirm action-sheet (restyle existing markup, scoped to .action-sheet) ---- */ .action-sheet .action-sheet-content h2 { font-size: 28px; font-weight: 800; color: var(--v2-ink); } .action-sheet .summary-card { border: 1px solid var(--v2-line); border-radius: 14px; padding: 6px 14px; background: var(--v2-surface-2); } .action-sheet .summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--v2-line); font-size: 13.5px; margin: 0; } .action-sheet .summary-row:last-child { border-bottom: 0; } .action-sheet .summary-row span:first-child { color: var(--v2-muted); } .action-sheet .summary-row span:last-child { font-weight: 700; color: var(--v2-ink); display: inline-flex; align-items: center; gap: 5px; } .action-sheet .net-icon { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } .action-sheet .payment-method { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--v2-brand); background: var(--v2-brand-soft); border-radius: 14px; padding: 12px; color: var(--v2-ink); } .action-sheet .payment-method .pm-left { display: flex; align-items: center; gap: 10px; } .action-sheet .payment-method .icon-wrapper { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--v2-brand); display: grid; place-items: center; font-size: 17px; } .action-sheet .payment-method small { color: var(--v2-muted); } .action-sheet .default-check { width: 22px; height: 22px; border-radius: 50%; background: var(--v2-brand); color: #fff; display: grid; place-items: center; } .action-sheet #confirmPay, .action-sheet .btn-primary.btn-lg { background: var(--v2-brand-grad); border: 0; border-radius: 13px; font-weight: 700; box-shadow: var(--v2-shadow-brand); height: 52px; } /* ---- success screen ---- */ .v2-vtu-success { text-align: center; padding: 44px 20px 30px; max-width: 380px; margin: 0 auto; } .v2-vtu-success-ic { width: 88px; height: 88px; border-radius: 50%; background: var(--v2-ok-bg); color: var(--v2-ok); display: grid; place-items: center; font-size: 48px; margin: 0 auto 18px; } .v2-vtu-success h2 { font-size: 21px; font-weight: 800; color: var(--v2-ink); margin: 0 0 6px; } .v2-vtu-success-msg { font-size: 13.5px; color: var(--v2-muted); margin: 0 0 20px; line-height: 1.5; } .v2-vtu-success-card { background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; padding: 4px 14px; box-shadow: var(--v2-shadow-sm); margin-bottom: 18px; text-align: left; } .v2-vtu-success-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--v2-line); font-size: 13px; } .v2-vtu-success-row:last-child { border-bottom: 0; } .v2-vtu-success-row .k { color: var(--v2-muted); flex: 0 0 auto; } .v2-vtu-success-row .v { font-weight: 700; color: var(--v2-ink); text-align: right; word-break: break-word; } .v2-vtu-success-token { background: var(--v2-brand-soft); border: 1px dashed rgba(255,109,0,.45); border-radius: 12px; padding: 12px; margin-bottom: 18px; text-align: center; } .v2-vtu-success-token .lbl { font-size: 11px; color: var(--v2-brand-strong); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .v2-vtu-success-token .tok { font-size: 18px; font-weight: 800; color: var(--v2-ink); letter-spacing: 1px; margin-top: 3px; word-break: break-all; } .v2-vtu-success-actions { display: flex; gap: 10px; } .v2-vtu-btn-primary, .v2-vtu-btn-ghost { flex: 1; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; } .v2-vtu-btn-primary { background: var(--v2-brand-grad); color: #fff; border: 0; box-shadow: var(--v2-shadow-brand); } .v2-vtu-btn-ghost { background: #fff; color: var(--v2-ink-2); border: 1.5px solid var(--v2-line-strong); } /* ---- dark mode ---- */ body.dark-mode .v2-vtu-svc { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-vtu-svc-title { color: #fff; } body.dark-mode .v2-vtu-wallet { background: linear-gradient(135deg, rgba(255,138,30,.12), rgba(255,109,0,.05)); border-color: rgba(255,255,255,.10); } body.dark-mode .v2-vtu-wallet-amt { color: #fff; } body.dark-mode .v2-vtu-row, body.dark-mode .v2-vtu-amount, body.dark-mode .v2-vtu-picker { background: #0f1422; border-color: rgba(255,255,255,.14); } body.dark-mode .v2-vtu-input, body.dark-mode .v2-vtu-amount input, body.dark-mode .v2-vtu-picker { color: #fff; } body.dark-mode .v2-vtu-chip { background: #0f1422; border-color: rgba(255,255,255,.14); color: #fff; } body.dark-mode .action-sheet .summary-card { background: #0f1422; border-color: rgba(255,255,255,.12); } body.dark-mode .v2-vtu-success h2 { color: #fff; } body.dark-mode .v2-vtu-success-card, body.dark-mode .v2-vtu-btn-ghost { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .action-sheet .modal-content.v2-vtu-sheet, body.dark-mode .v2-vtu-sheet-foot { background: var(--v2-surface); } body.dark-mode .v2-vtu-bundle { background: #0f1422; border-color: rgba(255,255,255,.12); } body.dark-mode .v2-vtu-bundle-title, body.dark-mode .v2-vtu-bundle-price { color: #fff; } /* ===================================================================== LOG ORDER DETAILS (log-order-details.php) — purchased credential cards ===================================================================== */ .v2-log-cred { background: #fff; border: 1px solid var(--v2-line); border-radius: 14px; box-shadow: var(--v2-shadow-sm); margin-bottom: 12px; overflow: hidden; } .v2-log-cred-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--v2-line); background: var(--v2-surface-2); } .v2-log-cred-id { font-size: 12px; font-weight: 700; color: var(--v2-muted); } .v2-log-cred-copy { display: inline-flex; align-items: center; gap: 5px; background: var(--v2-brand-soft); color: var(--v2-brand-strong); border: 1px solid rgba(255,109,0,.22); border-radius: 9px; padding: 7px 12px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; } .v2-log-cred-copy:active { background: var(--v2-brand-soft-2); } .v2-log-cred-body { margin: 0; padding: 13px; font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; font-size: 12.5px; line-height: 1.6; color: var(--v2-ink); white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; } body.dark-mode .v2-log-cred { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-log-cred-head { background: #0f1422; border-color: var(--v2-line-strong); } body.dark-mode .v2-log-cred-body { color: #e5e7eb; } /* ===================================================================== REFER & EARN (refer.php) — referral.PNG ===================================================================== */ .v2-ref-hero { display: flex; align-items: center; gap: 10px; padding: 4px 2px 12px; margin-bottom: 8px; } .v2-ref-hero-text { flex: 1; min-width: 0; } .v2-ref-hero-title { font-size: 24px; font-weight: 800; color: var(--v2-ink); line-height: 1.15; } .v2-ref-hero-title .accent { color: var(--v2-brand); } .v2-ref-hero-sub { font-size: 12.5px; color: var(--v2-ink-2); margin-top: 6px; line-height: 1.4; } .v2-ref-hero-img { width: 150px; flex: 0 0 auto; text-align: center; } .v2-ref-hero-img img { width: 100%; height: auto; } .v2-ref-card { background: #fff; border: 1px solid var(--v2-line); border-radius: 18px; padding: 16px; box-shadow: var(--v2-shadow-sm); margin-bottom: 16px; } .v2-ref-card-title { font-size: 13px; font-weight: 800; color: var(--v2-ink); margin-bottom: 14px; } .v2-ref-seclabel { font-size: 13px; font-weight: 800; color: var(--v2-ink); margin: 0 2px 12px; } .v2-ref-channels { display: flex; justify-content: space-between; gap: 8px; } .v2-ref-channel { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; } .v2-ref-channel-img { width: 52px; height: 52px; object-fit: contain; } .v2-ref-channel span { font-size: 12px; font-weight: 600; color: var(--v2-ink-2); } .v2-ref-linkfield { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--v2-line-strong); border-radius: 13px; padding: 5px 5px 5px 14px; } .v2-ref-linkfield input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--v2-ink-2); font-family: inherit; } .v2-ref-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--v2-brand-grad); color: #fff; border: 0; border-radius: 10px; padding: 11px 16px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: var(--v2-shadow-brand); } .v2-ref-how { background: #FFF8E6; border: 1px solid rgba(234,179,8,.20); border-radius: 18px; padding: 16px; margin-bottom: 16px; } .v2-ref-how-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--v2-ink); margin-bottom: 12px; } .v2-ref-how-title i { color: var(--v2-brand); font-size: 19px; } .v2-ref-step { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 12px; box-shadow: var(--v2-shadow-sm); } .v2-ref-step + .v2-ref-step { margin-top: 9px; } .v2-ref-step-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--v2-brand); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; } .v2-ref-step-txt { flex: 1; min-width: 0; font-size: 12.5px; color: var(--v2-ink-2); line-height: 1.4; } .v2-ref-step-ic { flex: 0 0 auto; color: var(--v2-brand); font-size: 18px; } .v2-ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .v2-ref-stat { background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; padding: 14px; box-shadow: var(--v2-shadow-sm); } .v2-ref-stat-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; margin-bottom: 10px; } .v2-ref-stat-ic.users { background: var(--v2-info-bg); color: var(--v2-info); } .v2-ref-stat-ic.amount { background: var(--v2-brand-soft); color: var(--v2-brand); } .v2-ref-stat-val { font-size: 20px; font-weight: 800; color: var(--v2-ink); line-height: 1.1; } .v2-ref-stat-label { font-size: 11.5px; color: var(--v2-muted); margin-top: 3px; } body.dark-mode .v2-ref-hero-title { color: #fff; } body.dark-mode .v2-ref-how { background: rgba(234,179,8,.08); border-color: rgba(255,255,255,.10); } body.dark-mode .v2-ref-step { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-ref-card, body.dark-mode .v2-ref-stat { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-ref-card-title, body.dark-mode .v2-ref-seclabel, body.dark-mode .v2-ref-stat-val { color: #fff; } body.dark-mode .v2-ref-linkfield { background: #0f1422; border-color: rgba(255,255,255,.14); } body.dark-mode .v2-ref-linkfield input { color: #cbd5e1; } /* ===================================================================== VIDEO TUTORIALS (video-tutorials.php) — tutorial.PNG ===================================================================== */ .v2-vid-search { position: relative; margin-bottom: 16px; } .v2-vid-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--v2-muted); font-size: 18px; } .v2-vid-search input { width: 100%; height: 50px; padding: 0 14px 0 42px; border: 1px solid var(--v2-line-strong); background: #fff; color: var(--v2-ink); border-radius: 14px; outline: none; font-size: 14px; font-family: inherit; box-shadow: var(--v2-shadow-sm); } .v2-vid-search input:focus { border-color: var(--v2-brand); box-shadow: 0 0 0 3px rgba(255,109,0,.12); } .v2-vid-search input::placeholder { color: #B4B9C4; } .v2-vid-card { background: #fff; border: 1px solid var(--v2-line); border-radius: 18px; overflow: hidden; box-shadow: var(--v2-shadow-sm); margin-bottom: 16px; } .v2-vid-thumb { position: relative; height: 180px; overflow: hidden; background: var(--v2-brand-soft); } .v2-vid-thumb img { width: 100%; height: 100%; object-fit: cover; } .v2-vid-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.30)); } .v2-vid-play { position: absolute; bottom: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; background: var(--v2-brand-grad); color: #fff; border: 0; border-radius: 999px; padding: 7px 16px 7px 7px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: var(--v2-shadow-brand); } .v2-vid-play .pic { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 16px; } .v2-vid-body { padding: 14px 16px; } .v2-vid-title { font-size: 15px; font-weight: 800; color: var(--v2-ink); line-height: 1.3; } .v2-vid-caption { font-size: 12.5px; color: var(--v2-muted); margin-top: 4px; line-height: 1.45; } /* video player overlay (self-contained, not Bootstrap) */ .v2-vidmodal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(4px); z-index: 6000; align-items: center; justify-content: center; padding: 18px; } .v2-vidmodal-inner { position: relative; background: #111; border-radius: 16px; width: 100%; max-width: 900px; padding: 18px; box-shadow: 0 25px 60px rgba(0,0,0,.6); } .v2-vidmodal-inner video { width: 100%; height: auto; max-height: 70vh; border-radius: 12px; display: block; } .v2-vidmodal-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 22px; display: grid; place-items: center; cursor: pointer; z-index: 2; } .v2-vidmodal-close:hover { background: rgba(255,255,255,.32); } body.dark-mode .v2-vid-search input { background: #0f1422; border-color: rgba(255,255,255,.14); color: #fff; } body.dark-mode .v2-vid-card { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-vid-title { color: #fff; } /* ===================================================================== BOOST SOCIALS (boost-socials.php) — boost-socials.PNG ===================================================================== */ .v2-bs-label { font-size: 13px; font-weight: 800; color: var(--v2-ink); margin: 4px 2px 10px; } .v2-bs-card { background: #fff; border: 1px solid var(--v2-line); border-radius: 14px; padding: 12px; box-shadow: var(--v2-shadow-sm); margin-bottom: 16px; } /* server radio cards */ .v2-bs-servers { display: flex; gap: 10px; } .v2-bs-server { flex: 1; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--v2-line-strong); border-radius: 12px; padding: 12px; cursor: pointer; position: relative; box-shadow: var(--v2-shadow-sm); } .v2-bs-server input { position: absolute; opacity: 0; width: 0; height: 0; } .v2-bs-server-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--v2-line-strong); flex: 0 0 auto; display: grid; place-items: center; } .v2-bs-server-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: transparent; } .v2-bs-server-ic { font-size: 18px; color: var(--v2-ink-2); flex: 0 0 auto; } .v2-bs-server-name { font-size: 13px; font-weight: 600; color: var(--v2-ink); flex: 1; min-width: 0; } .v2-bs-server:has(input:checked) { border-color: var(--v2-brand); background: var(--v2-brand-soft); } .v2-bs-server:has(input:checked) .v2-bs-server-radio { border-color: var(--v2-brand); } .v2-bs-server:has(input:checked) .v2-bs-server-radio::after { background: var(--v2-brand); } .v2-bs-server:has(input:checked) .v2-bs-server-ic { color: var(--v2-brand); } /* social media row */ .v2-bs-social { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 4px 12px; border-radius: 12px; cursor: pointer; } .v2-bs-social-ic { width: 46px; height: 46px; display: grid; place-items: center; } .v2-bs-social-ic img { max-width: 44px; max-height: 44px; border-radius: 12px; object-fit: cover; } .v2-bs-social .icon-wrapper { width: 44px; height: 44px; border-radius: 50%; background: var(--v2-brand-soft); color: var(--v2-brand); display: grid; place-items: center; font-size: 20px; } .v2-bs-social small { font-size: 11px; color: var(--v2-ink-2); font-weight: 600; } .v2-bs-social.active::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 3px; background: var(--v2-brand); } .v2-bs-social.active small { color: var(--v2-brand); } /* category/service fields (nice-select) */ .v2-bs-field { position: relative; margin-bottom: 14px; } .v2-bs-field-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 18px; color: var(--v2-muted); pointer-events: none; } .v2-bs-field .nice-select { padding-left: 42px !important; display: flex !important; align-items: center; } .v2-bs-field .nice-select .nice-select-dropdown { width: 100%; left: 0 !important; right: auto; background: #fff; border: 1px solid var(--v2-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(20,24,40,.16); margin-top: 6px; } .v2-bs-field .nice-select .list { width: 100%; max-height: 260px; } /* empty state */ .v2-bs-empty { background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; padding: 26px 16px; text-align: center; box-shadow: var(--v2-shadow-sm); margin-bottom: 16px; } .v2-bs-empty img { width: 92px; height: auto; margin: 0 auto 10px; opacity: .95; } .v2-bs-empty-title { font-size: 15px; font-weight: 800; color: var(--v2-ink); } .v2-bs-empty-sub { font-size: 12.5px; color: var(--v2-muted); margin-top: 4px; } /* service preview + order details */ #servicePreview { background: #fff !important; border: 1px solid var(--v2-line) !important; border-radius: 16px !important; box-shadow: var(--v2-shadow-sm); } .svc-title { display: block; font-size: 15px; font-weight: 700; color: var(--v2-ink); margin-bottom: 12px; } .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; } .svc-item { display: flex; flex-direction: column; gap: 2px; } .svc-label { font-size: 12px; color: var(--v2-muted); } .svc-value { font-size: 14px; font-weight: 600; color: var(--v2-ink); } .svc-item:not(:nth-child(-n+2)) { padding-top: 8px; border-top: 1px dashed var(--v2-line); } .qty-box input { width: 90px; text-align: center; } .total-estimate strong:last-child { font-size: 18px; font-weight: 800; color: var(--v2-ink); } body.dark-mode .v2-bs-card, body.dark-mode .v2-bs-server, body.dark-mode .v2-bs-empty, body.dark-mode #servicePreview { background: var(--v2-surface) !important; border-color: var(--v2-line-strong) !important; } body.dark-mode .v2-bs-server-name, body.dark-mode .v2-bs-empty-title, body.dark-mode .svc-value, body.dark-mode .total-estimate strong:last-child { color: #fff; } /* ===================================================================== TELEGRAM PREMIUM (buy-telegram-products.php) — v2 language (no ref) ===================================================================== */ .v2-tg-recipient { display: flex; align-items: center; gap: 12px; background: var(--v2-brand-soft); border: 1px solid rgba(255,109,0,.18); border-radius: 14px; padding: 12px; margin-bottom: 14px; } .v2-tg-recipient img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #fff; } .v2-tg-recipient-name { font-size: 14px; font-weight: 700; color: var(--v2-ink); } .v2-tg-recipient-sub { font-size: 12px; color: var(--v2-muted); margin-top: 2px; } .v2-tg-price { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--v2-line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--v2-shadow-sm); } .v2-tg-price-label { font-size: 13px; color: var(--v2-muted); } .v2-tg-price-val { font-size: 20px; font-weight: 800; color: var(--v2-ink); } .v2-tg-hint { font-size: 12px; color: var(--v2-muted); margin: 6px 2px 14px; } body.dark-mode .v2-tg-price { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-tg-recipient-name, body.dark-mode .v2-tg-price-val { color: #fff; } /* ===================================================================== NOTIFICATIONS (notifications.php) — v2 language (no ref) ===================================================================== */ .v2-nt-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .v2-nt-list li { margin: 0; padding: 0; } .v2-nt-item { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--v2-line); border-radius: 14px; padding: 13px; box-shadow: var(--v2-shadow-sm); text-decoration: none; color: var(--v2-ink); } .v2-nt-item.unread { border-color: rgba(255,109,0,.22); background: var(--v2-brand-soft); } .v2-nt-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--v2-brand-soft); color: var(--v2-brand); display: grid; place-items: center; font-size: 19px; } .v2-nt-item.unread .v2-nt-ic { background: #fff; } .v2-nt-main { flex: 1; min-width: 0; } .v2-nt-title { font-size: 13.5px; font-weight: 700; color: var(--v2-ink); } .v2-nt-preview { font-size: 12px; color: var(--v2-muted); margin-top: 2px; line-height: 1.4; } .v2-nt-time { font-size: 11px; color: var(--v2-muted); margin-top: 5px; } .v2-nt-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--v2-brand); margin-top: 6px; } .v2-nt-empty { text-align: center; padding: 40px 16px; } .v2-nt-empty img { width: 92px; height: auto; margin: 0 auto 10px; opacity: .95; } .v2-nt-empty-title { font-size: 15px; font-weight: 800; color: var(--v2-ink); } .v2-nt-empty-sub { font-size: 12.5px; color: var(--v2-muted); margin-top: 4px; } body.dark-mode .v2-nt-item { background: var(--v2-surface); border-color: var(--v2-line-strong); } body.dark-mode .v2-nt-title, body.dark-mode .v2-nt-empty-title { color: #fff; }