/* ===================================================================== DX Design System — modern dollar exchange theme Loaded LAST so it overrides legacy bootstrap/style.css/stylesheet.css Palette: Midnight navy + Electric indigo + Cyan glow + Dollar gold ===================================================================== */ :root { --dx-ink: #0a0f24; --dx-ink-2: #121a3a; --dx-ink-3: #1b2552; --dx-brand: #7c3aed; --dx-brand-2: #6d28d9; --dx-brand-soft: #f3e8ff; --dx-brand-line: #e9d5ff; --dx-cyan: #00c2ff; --dx-gold: #ffb020; --dx-gold-2: #ff8a00; --dx-ok: #12b886; --dx-ok-soft: #e3faf2; --dx-warn: #f59f00; --dx-warn-soft: #fff6e0; --dx-bad: #f03e3e; --dx-bad-soft: #ffeded; --dx-bg: #f6f3ff; --dx-surface: #ffffff; --dx-line: #e6e9f5; --dx-text: #0f1530; --dx-muted: #6b7391; --dx-grad: linear-gradient(135deg, #7c3aed 0%, #00c2ff 100%); --dx-grad-dark: linear-gradient(135deg, #0a0f24 0%, #1b2552 60%, #2a2f7a 100%); --dx-grad-gold: linear-gradient(135deg, #ffb020 0%, #ff8a00 100%); --dx-r: 16px; --dx-r-sm: 10px; --dx-shadow: 0 10px 30px -12px rgba(30, 30, 110, .18); --dx-shadow-lg: 0 30px 60px -20px rgba(30, 30, 110, .35); --dx-font: 'Inter', 'Hind Siliguri', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { font-family: var(--dx-font) !important; font-size: 15px; line-height: 1.6; color: var(--dx-text) !important; background: var(--dx-bg) !important; -webkit-font-smoothing: antialiased; } a { color: var(--dx-brand); transition: color .2s, background .2s, transform .2s; } a:hover, a:focus { color: var(--dx-brand-2); text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--dx-font); color: var(--dx-text); font-weight: 700; letter-spacing: -.01em; } img { max-width: 100%; } ::selection { background: var(--dx-brand); color: #fff; } #wrapper { background: transparent !important; } #body-ctnr, #body-ctnr.dark { background: transparent !important; padding: 28px 0 10px !important; min-height: 520px; } #body-ctnr h1 { color: var(--dx-text); font-size: 28px; margin: 0 0 18px; } .container { max-width: 1200px; } /* ---------- Top status bar ---------- */ .dx-top { background: var(--dx-ink); color: #b9c0e6; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .dx-top .dx-top-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .dx-top i { color: var(--dx-cyan); margin-right: 5px; } .dx-top b { color: #fff; font-weight: 600; } .dx-top .dx-sep { opacity: .3; margin: 0 10px; } .dx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(18,184,134,.15); color: #3fe0b0; border: 1px solid rgba(18,184,134,.35); } .dx-pill.off { background: rgba(255,255,255,.07); color: #9aa3cc; border-color: rgba(255,255,255,.12); } .dx-pill .dot-live { width: 7px; height: 7px; border-radius: 50%; background: #3fe0b0; box-shadow: 0 0 0 0 rgba(63,224,176,.7); animation: dxPulse 1.8s infinite; } .dx-pill.off .dot-live { background: #8890b8; animation: none; } @keyframes dxPulse { 70% { box-shadow: 0 0 0 7px rgba(63,224,176,0); } 100% { box-shadow: 0 0 0 0 rgba(63,224,176,0); } } /* ---------- Navbar ---------- */ .dx-nav { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--dx-line); } .dx-nav-in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 18px; } .dx-logo { display: flex; align-items: center; flex: 0 0 auto; } .dx-logo img { max-height: 38px; width: auto; } .dx-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; justify-content: center; } .dx-menu li a { display: block; padding: 9px 14px; border-radius: 999px; color: var(--dx-text); font-weight: 600; font-size: 14px; white-space: nowrap; } .dx-menu li a i { color: var(--dx-brand); margin-right: 5px; font-size: 13px; } .dx-menu li a:hover, .dx-menu li.active a { background: var(--dx-brand-soft); color: var(--dx-brand-2); } .dx-auth { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .dx-balance { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--dx-ok-soft); color: #0b8a63 !important; font-weight: 700; font-size: 13px; border: 1px solid #b6efd9; } .dx-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--dx-line); background: #fff; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .dx-burger span, .dx-burger span:before, .dx-burger span:after { display: block; width: 20px; height: 2px; background: var(--dx-ink); border-radius: 2px; position: relative; content: ''; transition: .25s; } .dx-burger span:before { position: absolute; top: -6px; } .dx-burger span:after { position: absolute; top: 6px; } .dx-overlay { display: none; position: fixed; inset: 0; background: rgba(10,15,36,.55); z-index: 1998; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .dx-overlay.on { display: block; } .dx-drawer-head, .dx-drawer-auth { display: none; } /* language flags */ #languages { display: inline-flex; gap: 6px; align-items: center; } #languages img { width: 22px; height: auto; border-radius: 4px; opacity: .85; } #languages img:hover { opacity: 1; } /* ---------- Buttons ---------- */ .dx-btn, .btn { font-family: var(--dx-font); border-radius: 12px !important; font-weight: 700; letter-spacing: .01em; transition: all .2s ease; border-width: 1px; } .dx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-size: 14px; cursor: pointer; border: 1px solid transparent; line-height: 1.2; } .dx-btn-primary, .btn-success, .btn-primary, a.signup, input.btn-success, .btn-info { background: var(--dx-grad) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 22px -8px rgba(124,58,237,.65); text-shadow: none; } .dx-btn-primary:hover, .btn-success:hover, .btn-primary:hover, a.signup:hover, .btn-info:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(124,58,237,.75); filter: brightness(1.05); color: #fff !important; } .dx-btn-ghost { background: #fff; color: var(--dx-brand-2) !important; border-color: var(--dx-brand-line); } .dx-btn-ghost:hover { background: var(--dx-brand-soft); } .dx-btn-gold { background: var(--dx-grad-gold); color: #3a2300 !important; box-shadow: 0 10px 22px -8px rgba(255,138,0,.6); } .dx-btn-gold:hover { transform: translateY(-2px); color: #3a2300; } .btn-default { background: #fff !important; border: 1px solid var(--dx-line) !important; color: var(--dx-text) !important; box-shadow: none; } .btn-default:hover { background: var(--dx-brand-soft) !important; border-color: var(--dx-brand-line) !important; color: var(--dx-brand-2) !important; } .btn-danger { background: var(--dx-bad) !important; border: 0 !important; color: #fff !important; } .btn-warning { background: var(--dx-gold) !important; border: 0 !important; color: #3a2300 !important; } .btn-lg { padding: 14px 26px; font-size: 16px; } a.login { background: #fff; color: var(--dx-text) !important; border: 1px solid var(--dx-line); padding: 9px 18px; border-radius: 12px; font-weight: 700; } a.login:hover { background: var(--dx-brand-soft); border-color: var(--dx-brand-line); } a.signup { padding: 9px 18px; border-radius: 12px; font-weight: 700; margin: 0; } /* ---------- Forms ---------- */ label { font-weight: 600; color: var(--dx-text); font-size: 13.5px; } .form-control, input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], textarea, select.form-control { font-family: var(--dx-font); height: auto !important; min-height: 46px; border: 1.5px solid var(--dx-line) !important; border-radius: 12px !important; background: #fff !important; color: var(--dx-text) !important; font-size: 15px; font-weight: 500; padding: 11px 14px; box-shadow: none !important; transition: border-color .2s, box-shadow .2s; } .form-control:focus, input:focus, textarea:focus { border-color: var(--dx-brand) !important; box-shadow: 0 0 0 4px rgba(124,58,237,.14) !important; outline: 0; } .input-group-addon { background: var(--dx-brand-soft) !important; border: 1.5px solid var(--dx-line) !important; color: var(--dx-brand-2) !important; font-weight: 800 !important; border-radius: 0 12px 12px 0 !important; border-left: 0 !important; } .input-group .form-control { border-radius: 12px 0 0 12px !important; } .input-group .form-control:only-child { border-radius: 12px !important; } .checkbox label, .radio label { font-weight: 500; } .help-block, .text-muted, small { color: var(--dx-muted) !important; } /* ---------- Cards / widgets ---------- */ .widget, .panel, .well, .box { background: var(--dx-surface) !important; border: 1px solid var(--dx-line) !important; border-radius: var(--dx-r) !important; box-shadow: var(--dx-shadow); padding: 22px; margin-bottom: 22px; } .panel { padding: 0; overflow: hidden; } .panel-heading { background: var(--dx-brand-soft) !important; border-bottom: 1px solid var(--dx-brand-line) !important; color: var(--dx-brand-2) !important; font-weight: 700; padding: 14px 18px; } .panel-body { padding: 18px; } hr { border-top-color: var(--dx-line); } /* ---------- Tables ---------- */ .table { background: #fff; border-radius: var(--dx-r-sm); overflow: hidden; margin-bottom: 18px; } .table > thead > tr > th { background: var(--dx-ink) !important; color: #fff !important; border: 0 !important; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; padding: 13px 12px; } .table > tbody > tr > td { border-top: 1px solid var(--dx-line) !important; padding: 13px 12px; vertical-align: middle; } .table-striped > tbody > tr:nth-of-type(odd) { background: #fafbff; } .table-hover > tbody > tr:hover { background: var(--dx-brand-soft); } .table-responsive { border: 0; } /* ---------- Alerts / labels ---------- */ .alert { border-radius: 12px !important; border: 1px solid transparent; font-weight: 500; padding: 14px 18px; } .alert-success { background: var(--dx-ok-soft) !important; color: #0a6b4d !important; border-color: #b6efd9 !important; } .alert-danger { background: var(--dx-bad-soft) !important; color: #b02424 !important; border-color: #ffc9c9 !important; } .alert-warning { background: var(--dx-warn-soft) !important; color: #8a5a00 !important; border-color: #ffe29a !important; } .alert-info { background: var(--dx-brand-soft) !important; color: var(--dx-brand-2) !important; border-color: var(--dx-brand-line) !important; } .label, .badge { border-radius: 999px !important; font-weight: 700; padding: .35em .85em; font-size: 11.5px; } .label-success { background: var(--dx-ok) !important; } .label-danger { background: var(--dx-bad) !important; } .label-warning { background: var(--dx-gold) !important; color: #3a2300 !important; } .label-info, .label-primary { background: var(--dx-brand) !important; } .label-default { background: #8c93b8 !important; } /* ---------- Dropdown / modal / tabs / pagination ---------- */ .dropdown-menu { border: 1px solid var(--dx-line); border-radius: 14px; padding: 8px; box-shadow: var(--dx-shadow-lg); min-width: 220px; margin-top: 10px; } .dropdown-menu > li > a { padding: 9px 12px; border-radius: 9px; font-weight: 600; color: var(--dx-text); } .dropdown-menu > li > a i { color: var(--dx-brand); width: 18px; text-align: center; margin-right: 4px; } .dropdown-menu > li > a:hover { background: var(--dx-brand-soft); color: var(--dx-brand-2); } .dropdown-menu .divider { background: var(--dx-line); } #account_nav .btn { background: var(--dx-brand-soft) !important; color: var(--dx-brand-2) !important; border: 1px solid var(--dx-brand-line) !important; box-shadow: none; } .modal-content { border: 0; border-radius: 22px; box-shadow: var(--dx-shadow-lg); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--dx-line); padding: 20px 24px; background: var(--dx-brand-soft); } .modal-title { font-size: 20px; font-weight: 800; } .modal-body { padding: 24px; } .modal-backdrop.in { opacity: .6; background: var(--dx-ink); } .nav-tabs { border-bottom: 2px solid var(--dx-line); } .nav-tabs > li > a { border: 0 !important; border-radius: 10px 10px 0 0; font-weight: 600; color: var(--dx-muted); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover { background: var(--dx-brand-soft) !important; color: var(--dx-brand-2) !important; border-bottom: 3px solid var(--dx-brand) !important; } .pagination > li > a, .pagination > li > span { border: 1px solid var(--dx-line); margin: 0 3px; border-radius: 10px !important; color: var(--dx-text); font-weight: 600; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--dx-brand) !important; border-color: var(--dx-brand) !important; color: #fff; } .pagination > li > a:hover { background: var(--dx-brand-soft); } .breadcrumb { background: transparent; padding: 0; } .progress { border-radius: 999px; background: var(--dx-line); box-shadow: none; height: 12px; } .progress-bar { background: var(--dx-grad) !important; } /* ---------- Scroll to top ---------- */ .scrollup { position: fixed; right: 20px; bottom: 22px; z-index: 999; display: none; width: 46px; height: 46px; line-height: 46px; text-align: center; font-size: 0 !important; background: var(--dx-grad) !important; color: #fff !important; border-radius: 50% !important; box-shadow: 0 12px 24px -8px rgba(124,58,237,.7); background-image: var(--dx-grad) !important; text-indent: 0; overflow: hidden; } .scrollup:before { content: "\f106"; font-family: FontAwesome; font-size: 22px; color: #fff; line-height: 46px; } /* =================================================================== HOME PAGE =================================================================== */ .dx-hero { position: relative; overflow: hidden; background: var(--dx-grad-dark); border-radius: 28px; padding: 54px 44px; margin-bottom: 30px; color: #fff; box-shadow: var(--dx-shadow-lg); } .dx-hero:before, .dx-hero:after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; } .dx-hero:before { width: 380px; height: 380px; background: var(--dx-brand); top: -120px; left: -80px; } .dx-hero:after { width: 340px; height: 340px; background: var(--dx-cyan); bottom: -140px; right: -60px; opacity: .35; } .dx-hero > .row { position: relative; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; } .dx-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: 13px; font-weight: 600; color: #dfe3ff; margin-bottom: 18px; } .dx-hero-badge i { color: var(--dx-gold); } .dx-hero h1, #body-ctnr .dx-hero h1 { color: #fff; font-size: 44px; line-height: 1.18; font-weight: 800; margin: 0 0 16px; } .dx-hero h1 .grad { background: var(--dx-grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .dx-hero p.lead { color: #c3caf0; font-size: 16.5px; max-width: 520px; margin-bottom: 26px; } .dx-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; } .dx-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; } .dx-hero-stats div { font-size: 12.5px; color: #aab3e6; } .dx-hero-stats b { display: block; font-size: 24px; color: #fff; font-weight: 800; line-height: 1.1; } /* Exchange card */ .dx-ex-card { background: #fff; color: var(--dx-text); border-radius: 24px; padding: 26px; box-shadow: 0 40px 70px -28px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.6); } .dx-ex-card h2 { font-size: 20px; margin: 0 0 4px; font-weight: 800; display: flex; align-items: center; gap: 9px; } .dx-ex-card h2 i { color: var(--dx-brand); } .dx-ex-card .sub { color: var(--dx-muted); font-size: 13px; margin-bottom: 18px; } .dx-field { margin-bottom: 12px; position: relative; } .dx-field .dx-lbl { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--dx-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px; } .dx-field .dx-lbl em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--dx-brand); } .dx-select { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--dx-bg); border: 1.5px solid var(--dx-line); cursor: pointer; transition: .2s; user-select: none; } .dx-select:hover, .dx-select.open { border-color: var(--dx-brand); background: #fff; box-shadow: 0 0 0 4px rgba(124,58,237,.12); } .dx-select .cur { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 15px; min-width: 0; } .dx-select .cur img { width: 32px; height: 32px; border-radius: 50%; background: #fff; padding: 2px; border: 1px solid var(--dx-line); flex: 0 0 auto; object-fit: contain; } .dx-select .cur span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dx-select .fa { color: var(--dx-muted); transition: transform .2s; } .dx-select.open .fa { transform: rotate(180deg); } .dx-list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: #fff; border: 1px solid var(--dx-line); border-radius: 16px; padding: 8px; box-shadow: var(--dx-shadow-lg); max-height: 270px; overflow-y: auto; } .dx-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; cursor: pointer; font-weight: 600; font-size: 14px; transition: background .15s; } .dx-item img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--dx-line); background: #fff; object-fit: contain; } .dx-item:hover { background: var(--dx-brand-soft); color: var(--dx-brand-2); } .dx-swap-wrap { text-align: center; height: 0; position: relative; z-index: 5; } .dx-swap { position: relative; top: -18px; width: 40px; height: 40px; border-radius: 50%; border: 4px solid #fff; background: var(--dx-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 18px -6px rgba(124,58,237,.7); transition: transform .35s; } .dx-swap:hover { transform: rotate(180deg); } #exbutton { width: 100%; margin-top: 22px; padding: 16px 24px; font-size: 16px; } .dx-secure { text-align: center; color: var(--dx-muted); font-size: 12.5px; margin-top: 14px; } .dx-secure i { color: var(--dx-ok); } /* currency marquee strip */ .dx-strip { background: #fff; border: 1px solid var(--dx-line); border-radius: 20px; padding: 14px 20px; margin-bottom: 30px; box-shadow: var(--dx-shadow); display: flex; align-items: center; gap: 18px; overflow: hidden; } .dx-strip .ttl { font-weight: 800; white-space: nowrap; font-size: 14px; color: var(--dx-brand-2); } .dx-strip .ttl i { color: var(--dx-gold); margin-right: 6px; } .dx-strip .logos { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; flex: 1; } .dx-strip .logos::-webkit-scrollbar { display: none; } .dx-strip .logos img { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--dx-line); padding: 3px; flex: 0 0 auto; object-fit: contain; transition: transform .2s; } .dx-strip .logos a:hover img, .dx-strip .logos img:hover { transform: translateY(-3px) scale(1.06); } /* notice */ .dx-notice { display: flex; align-items: center; gap: 12px; background: var(--dx-warn-soft); border: 1px solid #ffe29a; border-radius: 14px; padding: 10px 16px; margin-bottom: 22px; overflow: hidden; } .dx-notice .tag { background: var(--dx-grad-gold); color: #3a2300; font-weight: 800; font-size: 12px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } .dx-notice marquee { font-weight: 600; color: #7a4d00; font-size: 14px; } /* section headings */ .dx-sec-head { text-align: center; max-width: 640px; margin: 46px auto 28px; } .dx-sec-head .eyebrow { display: inline-block; color: var(--dx-brand); background: var(--dx-brand-soft); padding: 4px 14px; border-radius: 999px; font-weight: 700; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; } .dx-sec-head h2 { font-size: 30px; font-weight: 800; margin: 0 0 8px; } .dx-sec-head p { color: var(--dx-muted); margin: 0; } /* features & steps */ .dx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .dx-feat { background: #fff; border: 1px solid var(--dx-line); border-radius: 20px; padding: 26px 22px; box-shadow: var(--dx-shadow); transition: .25s; } .dx-feat:hover { transform: translateY(-6px); border-color: var(--dx-brand-line); box-shadow: var(--dx-shadow-lg); } .dx-ico { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; background: var(--dx-grad); margin-bottom: 16px; box-shadow: 0 12px 22px -10px rgba(124,58,237,.7); } .dx-feat:nth-child(2) .dx-ico { background: var(--dx-grad-gold); box-shadow: 0 12px 22px -10px rgba(255,138,0,.7); } .dx-feat:nth-child(3) .dx-ico { background: linear-gradient(135deg, #12b886, #00c2ff); box-shadow: 0 12px 22px -10px rgba(18,184,134,.7); } .dx-feat:nth-child(4) .dx-ico { background: linear-gradient(135deg, #f03e3e, #ff8a00); box-shadow: 0 12px 22px -10px rgba(240,62,62,.6); } .dx-feat h4 { font-size: 17px; margin: 0 0 6px; } .dx-feat p { color: var(--dx-muted); font-size: 14px; margin: 0; } .dx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; } .dx-step { position: relative; background: var(--dx-ink); color: #fff; border-radius: 20px; padding: 28px 22px 24px; overflow: hidden; } .dx-step:before { counter-increment: s; content: "0" counter(s); position: absolute; right: 16px; top: 4px; font-size: 64px; font-weight: 800; color: rgba(255,255,255,.07); line-height: 1; } .dx-step i { color: var(--dx-cyan); font-size: 26px; margin-bottom: 14px; display: block; } .dx-step h4 { color: #fff; font-size: 16.5px; margin: 0 0 6px; } .dx-step p { color: #aab3e6; font-size: 13.5px; margin: 0; } /* home side widgets */ .dx-w-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; font-size: 16px; font-weight: 800; } .dx-w-title i { color: var(--dx-brand); margin-right: 8px; } .dx-w-title a { font-size: 12.5px; font-weight: 700; } .dx-reserve { list-style: none; padding: 0; margin: 0; max-height: 380px; overflow-y: auto; } .dx-reserve li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--dx-line); font-size: 13.5px; } .dx-reserve li:last-child { border-bottom: 0; } .dx-reserve .nm { display: flex; align-items: center; gap: 10px; font-weight: 700; min-width: 0; } .dx-reserve .nm img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--dx-line); background: #fff; object-fit: contain; } .dx-reserve .amt { text-align: right; font-weight: 700; color: var(--dx-ok); white-space: nowrap; } .dx-reserve .amt small { color: var(--dx-muted) !important; font-weight: 700; margin-left: 3px; } .dx-unl { background: var(--dx-ok-soft); color: #0b8a63; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; } .dx-live-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--dx-ink); color: #fff; border-radius: var(--dx-r) var(--dx-r) 0 0; font-weight: 800; } .dx-live-head .dx-pill { font-size: 11px; } .dx-live-wrap { background: #fff; border: 1px solid var(--dx-line); border-radius: var(--dx-r); box-shadow: var(--dx-shadow); overflow: hidden; margin-bottom: 22px; } .dx-live-body { padding: 14px; } .dx-review { background: var(--dx-bg); border-radius: 14px; padding: 16px; font-size: 13.5px; } .dx-review .stars i { color: var(--dx-gold); font-size: 14px; margin-right: 2px; } .dx-review .who { color: var(--dx-muted); font-size: 12.5px; margin: 6px 0; } .dx-review b.t { display: block; margin-bottom: 4px; } .dx-review p { margin: 0; color: #3b4266; } .carousel-indicators li { border-color: var(--dx-brand); } .carousel-indicators .active { background: var(--dx-brand); } .dx-news-i { padding: 11px 0; border-bottom: 1px dashed var(--dx-line); } .dx-news-i:last-child { border: 0; } .dx-news-i .d { font-size: 11.5px; color: var(--dx-brand); font-weight: 700; } .dx-news-i a { font-weight: 700; color: var(--dx-text); font-size: 14px; } .dx-news-i a:hover { color: var(--dx-brand); } /* exchange wizard (exchange*.php) */ .wrap .links { display: flex; justify-content: space-between; gap: 8px; margin: 16px 0 22px; } .dot { flex: 1; text-align: center; background: var(--dx-brand-soft) !important; border: 1px solid var(--dx-brand-line) !important; color: var(--dx-brand-2) !important; padding: 9px 12px !important; border-radius: 12px !important; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .06em; } .dot.current { background: var(--dx-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 20px -8px rgba(124,58,237,.7) !important; } .dot.disabled { background: #f1f3fb !important; color: #9aa1c2 !important; border-color: var(--dx-line) !important; box-shadow: none !important; } .extitle { font-size: 22px !important; font-weight: 800 !important; } h2.lined { font-size: 16px !important; color: var(--dx-brand) !important; } /* status cards inside getdata.php */ .exchange-card-box { border-radius: 14px !important; border: 1px solid var(--dx-line) !important; background: #fff !important; } .ex-badge-success { background: var(--dx-ok-soft) !important; color: #0b8a63 !important; border-color: #b6efd9 !important; } .ex-badge-warning { background: var(--dx-warn-soft) !important; color: #a86d00 !important; border-color: #ffe29a !important; } .ex-badge-danger { background: var(--dx-bad-soft) !important; color: #c02727 !important; border-color: #ffc9c9 !important; } /* =================================================================== FOOTER =================================================================== */ .dx-cta { position: relative; overflow: hidden; background: var(--dx-grad); border-radius: 28px; padding: 40px 44px; margin: 50px 0 -70px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: #fff; box-shadow: var(--dx-shadow-lg); } .dx-cta h3 { color: #fff; font-size: 26px; font-weight: 800; margin: 0 0 4px; } .dx-cta p { margin: 0; color: rgba(255,255,255,.88); } .dx-cta .dx-btn { background: #fff; color: var(--dx-brand-2) !important; box-shadow: 0 14px 26px -10px rgba(0,0,0,.4); } .dx-footer { background: var(--dx-ink); color: #aab3e6; padding: 110px 0 0; margin-top: 0; position: relative; } .dx-footer .row > div { margin-bottom: 26px; } .dx-footer h5 { color: #fff; font-size: 15px; font-weight: 800; margin: 6px 0 18px; text-transform: uppercase; letter-spacing: .08em; } .dx-footer ul { list-style: none; padding: 0; margin: 0; } .dx-footer ul li { margin-bottom: 10px; } .dx-footer a { color: #aab3e6; font-size: 14px; } .dx-footer a:hover { color: #fff; } .dx-footer ul li a i { color: var(--dx-cyan); margin-right: 8px; } .dx-footer .about { font-size: 14px; margin: 14px 0 16px; max-width: 320px; } .dx-fc div { margin-bottom: 8px; font-size: 14px; } .dx-fc i { width: 20px; color: var(--dx-cyan); } .dx-social { display: flex; gap: 10px; margin-top: 14px; } .dx-social a { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); color: #fff; border: 1px solid rgba(255,255,255,.1); font-size: 17px; } .dx-social a:hover { background: var(--dx-grad); transform: translateY(-3px); border-color: transparent; } .dx-fbottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .dx-fbottom .pay i { color: var(--dx-ok); } .dx-pages a { display: inline-block; margin: 0 6px 6px 0; } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .dx-grid, .dx-steps { grid-template-columns: repeat(2, 1fr); } .dx-hero { padding: 38px 26px; } .dx-hero h1, #body-ctnr .dx-hero h1 { font-size: 34px; } .dx-hero > .row { display: block; } .dx-ex-card { margin-top: 30px; } } @media (max-width: 991px) { .dx-burger { display: inline-flex; } .dx-menu { position: fixed; top: 0; right: -320px; width: 300px; max-width: 86vw; height: 100%; z-index: 1999; background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 76px 16px 24px; box-shadow: -20px 0 50px rgba(10,15,36,.35); transition: right .32s ease; overflow-y: auto; } .dx-menu.open { right: 0; } .dx-menu li a { border-radius: 12px; padding: 13px 14px; font-size: 15px; } .dx-auth .dx-btn-auth { display: none; } .dx-drawer-head { display: flex; position: absolute; top: 14px; left: 16px; right: 16px; align-items: center; justify-content: space-between; } .dx-drawer-head .x { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--dx-line); background: #fff; font-size: 18px; cursor: pointer; } .dx-drawer-auth { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--dx-line); } .dx-drawer-auth a { flex: 1; text-align: center; } .dx-top .hide-sm { display: none; } } @media (max-width: 575px) { body { font-size: 14.5px; } .dx-grid, .dx-steps { grid-template-columns: 1fr; } .dx-hero { border-radius: 22px; padding: 30px 18px; } .dx-hero h1, #body-ctnr .dx-hero h1 { font-size: 28px; } .dx-hero-stats { gap: 18px; } .dx-ex-card { padding: 20px 16px; border-radius: 20px; } .dx-strip { flex-direction: column; align-items: flex-start; } .dx-cta { padding: 28px 22px; margin-bottom: -60px; } .dx-cta h3 { font-size: 21px; } .dx-sec-head h2 { font-size: 24px; } .dx-nav-in { height: 62px; } .dx-top .dx-top-in { justify-content: center; text-align: center; } .widget, .panel-body { padding: 16px; } .dx-fbottom { justify-content: center; text-align: center; } } /* ---- home currency strip: infinite scroll ---- */ .dx-strip .logos { overflow: hidden; } .dx-strip .dx-track { display: flex; gap: 12px; width: max-content; animation: dxScroll 40s linear infinite; } .dx-strip .dx-track:hover { animation-play-state: paused; } .dx-strip .dx-track a { display: inline-flex; } @keyframes dxScroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .dx-strip .dx-track { animation: none; } .dx-strip .logos { overflow-x: auto; } } .dx-top .dx-pill #operator_live, .dx-pill .dot-live { display: inline-block; } /* =================================================================== INNER PAGES — light-theme components (replaces old dark inline themes) =================================================================== */ .about-content-box, .affiliate-content-box, .help-content-box, .contact-info-box, .referral_link { background: #f8f9ff; border: 1px solid var(--dx-line); border-radius: 16px; padding: 24px; margin-top: 18px; line-height: 1.8; color: #3b4266; } .about-content-box p, .affiliate-content-box p, .help-content-box p { margin-bottom: 14px; color: #3b4266; } .help-content-box h3, .help-content-box h4 { color: var(--dx-brand-2); margin: 20px 0 10px; } .contact-info-box { margin-top: 0; margin-bottom: 22px; } .contact-item { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 15px; font-weight: 500; } .contact-item:last-child { margin-bottom: 0; } .contact-item i { color: var(--dx-brand); } .help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; margin-top: 22px; } .help-card { background: #fff; border: 1px solid var(--dx-line); border-radius: 16px; padding: 20px; transition: .25s; } .help-card:hover { border-color: var(--dx-brand-line); box-shadow: var(--dx-shadow); transform: translateY(-3px); } .help-card h4 { color: var(--dx-brand-2); font-size: 16px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .help-card p { font-size: 14px; color: #3b4266; margin: 0; line-height: 1.6; } .goback { color: var(--dx-brand) !important; font-weight: 700; } #captchaimg { border-radius: 8px; border: 1px solid var(--dx-line); background: #f8f9ff; padding: 2px; } #acc_user_menu { background: #fff; border: 1px solid var(--dx-line); border-radius: 16px; padding: 8px 12px; margin-bottom: 22px; box-shadow: var(--dx-shadow); } #acc_user_menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } #acc_user_menu ul li a { display: block; color: var(--dx-text); font-weight: 600; padding: 9px 14px; border-radius: 10px; font-size: 14px; } #acc_user_menu ul li a:hover, #acc_user_menu ul li.active a { background: var(--dx-brand-soft); color: var(--dx-brand-2) !important; } .referral_link_share { display: flex; gap: 14px; margin-bottom: 18px; } .referral_link { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; } .reflink_textbox { background: #fff !important; border: 1.5px solid var(--dx-line) !important; color: var(--dx-brand-2) !important; border-radius: 12px; padding: 11px 15px; font-size: 14px; flex: 1; min-width: 240px; } .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 24px; } .quick-btn { background: #fff; border: 1px solid var(--dx-line); border-radius: 16px; padding: 18px 12px; text-align: center; color: var(--dx-brand-2) !important; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: var(--dx-shadow); transition: .25s; } .quick-btn:hover { background: var(--dx-grad); color: #fff !important; transform: translateY(-4px); box-shadow: var(--dx-shadow-lg); text-decoration: none; } .quick-btn i { font-size: 22px; } .table-responsive { background: #fff; border: 1px solid var(--dx-line); border-radius: 16px; padding: 8px; margin-top: 14px; overflow-x: auto; } table.btb { width: 100%; border-collapse: collapse; color: var(--dx-text); } table.btb th { background: var(--dx-brand-soft); color: var(--dx-brand-2) !important; padding: 12px; font-weight: 700; border-bottom: 2px solid var(--dx-brand-line); text-align: left; font-size: 13px; } table.btb td { padding: 12px; border-bottom: 1px solid var(--dx-line); color: #3b4266; } table.btb a { color: var(--dx-brand); font-weight: 600; } tr.row_even { background: #fff; } tr.row_odd { background: #fafbff; } .progress-bar-success { background: var(--dx-ok) !important; } .modern-review-card { background: #fff !important; border: 1px solid var(--dx-line) !important; border-radius: 18px !important; padding: 22px !important; height: 100%; display: flex; flex-direction: column; justify-content: space-between; transition: .25s; box-shadow: var(--dx-shadow) !important; margin-bottom: 20px; } .modern-review-card:hover { transform: translateY(-5px); border-color: var(--dx-brand-line) !important; box-shadow: var(--dx-shadow-lg) !important; } .testimonials-count { font-size: 14px !important; padding: 3px 12px !important; margin-left: 8px; color: #fff !important; background: var(--dx-brand) !important; border-radius: 999px !important; font-weight: 700; } .input-group { width: 100%; } .checkbox label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .checkboxx, input[type="checkbox"] { accent-color: var(--dx-brand); width: 17px; height: 17px; cursor: pointer; } .widget p a { font-weight: 600; } /* rates page cards */ .exchange-header-title { font-weight: 800; letter-spacing: -.5px; } .xml-badge { background: var(--dx-brand-soft); color: var(--dx-brand-2) !important; font-weight: 700; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--dx-brand-line); display: inline-block; } .xml-badge:hover { background: var(--dx-brand); color: #fff !important; } .modern-list-container { display: flex; flex-direction: column; gap: 12px; } .currency-section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dx-brand-2); margin: 24px 0 8px 4px; display: flex; align-items: center; gap: 10px; border-left: 4px solid var(--dx-brand); padding-left: 10px; } .exchange-list-card { background: #fff; border: 1px solid var(--dx-line); border-radius: 16px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; transition: .25s; box-shadow: var(--dx-shadow); } .exchange-list-card:hover { border-color: var(--dx-brand-line); transform: translateY(-3px); box-shadow: var(--dx-shadow-lg); } .currency-side { display: flex; align-items: center; gap: 12px; flex: 1; } .currency-code-box { font-weight: 800; font-size: 16px; } .currency-name-sub { font-size: 12px; color: var(--dx-muted); } .exchange-arrow-icon { color: var(--dx-brand); padding: 0 18px; font-size: 18px; } .reserve-tag { background: var(--dx-ok-soft); color: #0b8a63; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; border: 1px solid #b6efd9; } .btn-action-more { background: #fff; color: var(--dx-text); border: 1px solid var(--dx-line); padding: 8px 16px; border-radius: 12px; font-weight: 700; font-size: 13px; } .btn-action-more:hover { background: var(--dx-brand); color: #fff; border-color: var(--dx-brand); text-decoration: none; } @media (max-width: 575px) { .exchange-list-card { flex-direction: column; align-items: flex-start; gap: 10px; } .exchange-arrow-icon { display: none; } } /* ---- neutralise legacy heading/paragraph styles (Open Sans Condensed, blue, borders) ---- */ h1, h2, h3, h4, h5, h6, p, .lined { font-family: var(--dx-font) !important; } h1 { font-size: 30px; font-weight: 800; color: var(--dx-text); margin: 0 0 16px; padding: 0; } h2 { font-size: 24px; font-weight: 700; color: var(--dx-text); margin: 0 0 12px; padding: 0; } h3 { font-size: 19px; font-weight: 700; color: var(--dx-text); margin: 0 0 10px; padding: 0; } h4 { font-size: 16px; font-weight: 700; color: var(--dx-text); } p { font-size: 15px; color: inherit; } #body-ctnr h1, #body-ctnr h2, h1 { border-bottom: 0 !important; padding-bottom: 0 !important; } h2.lined { background: none; text-align: center; } h2.lined:before, h2.lined:after { display: none; } .dx-hero h1 { font-size: 44px; } @media (max-width: 991px) { .dx-hero h1 { font-size: 34px; } } @media (max-width: 575px) { .dx-hero h1 { font-size: 28px; } } .dx-sec-head h2 { font-size: 30px; font-weight: 800; padding: 0; } .dx-live-head, .dx-live-head * { font-family: var(--dx-font); } .dx-cta h3, .dx-footer h5 { font-family: var(--dx-font) !important; } .dx-cta h3 { color: #fff; font-size: 26px; } .dx-step h4, .dx-feat h4 { font-family: var(--dx-font) !important; } .dx-footer { background: var(--dx-ink) !important; width: auto; } .dx-footer img { filter: none; } /* menu fits on mid-size desktops */ @media (min-width: 992px) and (max-width: 1199px) { .dx-menu li a { padding: 8px 9px; font-size: 13px; } .dx-menu li a i { display: none; } } .dx-menu { flex-wrap: nowrap; } /* ---- mobile drawer fix: fixed-position drawer must not sit inside a backdrop-filter ancestor ---- */ .dx-overlay { z-index: 999; } @media (max-width: 991px) { .dx-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; } .dx-menu { z-index: 1001; } } /* =================================================================== v3 — COLORFUL REDESIGN · DARK MODE · PWA · NEW COMPONENTS =================================================================== */ :root { --dx-brand: #7c3aed; --dx-brand-2: #6d28d9; --dx-brand-soft: #f3e8ff; --dx-brand-line: #e9d5ff; --dx-pink: #ec4899; --dx-orange: #ff8a00; --dx-cyan: #06b6d4; --dx-blue: #3b82f6; --dx-green: #10b981; --dx-yellow: #fbbf24; --dx-grad: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%); --dx-grad-2: linear-gradient(135deg, #06b6d4 0%, #3b82f6 55%, #7c3aed 100%); --dx-grad-3: linear-gradient(135deg, #ff8a00 0%, #ec4899 100%); --dx-grad-4: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); --dx-grad-dark: linear-gradient(135deg, #0b0b1e 0%, #1e1b4b 50%, #4c1d95 100%); --dx-bg: #f6f3ff; --dx-surface: #ffffff; --dx-line: #ece7fb; --dx-text: #170f33; --dx-muted: #6d6890; --dx-ink: #0b0b1e; --dx-ink-2: #14122e; --dx-font: 'Plus Jakarta Sans', 'Hind Siliguri', 'Segoe UI', system-ui, sans-serif; --dx-shadow: 0 12px 34px -14px rgba(76, 29, 149, .25); --dx-shadow-lg: 0 34px 70px -24px rgba(76, 29, 149, .45); } body { background: radial-gradient(900px 500px at 8% -5%, rgba(236,72,153,.10), transparent 60%), radial-gradient(900px 600px at 100% 0%, rgba(124,58,237,.12), transparent 60%), var(--dx-bg) !important; background-attachment: fixed !important; } .btn-success, .btn-primary, .btn-info, .dx-btn-primary, a.signup, input.btn-success { background: var(--dx-grad) !important; box-shadow: 0 12px 26px -10px rgba(236,72,153,.7); } .dx-btn-primary:hover, .btn-success:hover, .btn-primary:hover, a.signup:hover { box-shadow: 0 18px 32px -10px rgba(236,72,153,.8); } /* top bar + ticker */ .dx-top { background: linear-gradient(90deg, #1e1b4b, #4c1d95 60%, #9d174d); } .dx-nav { position: sticky; top: 8px; background: transparent !important; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px 0 0; } .dx-nav .dx-nav-in { background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border: 1px solid var(--dx-line); border-radius: 999px; padding: 0 12px 0 22px; height: 64px; box-shadow: var(--dx-shadow); } .dx-menu li a { border-radius: 999px; } .dx-menu li.active a, .dx-menu li a:hover { background: var(--dx-grad); color: #fff !important; } .dx-menu li.active a i, .dx-menu li a:hover i { color: #fff; } .dx-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--dx-line); background: var(--dx-surface); color: var(--dx-brand); cursor: pointer; font-size: 16px; transition: .25s; } .dx-icon-btn:hover { background: var(--dx-grad); color: #fff; transform: rotate(18deg); } .dx-install-btn { background: var(--dx-grad-3); color: #fff; border: 0; animation: dxBounce 2.4s infinite; } @keyframes dxBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .dx-dd-info { padding: 8px 12px 6px; color: var(--dx-muted); font-size: 12.5px; list-style: none; } .dx-dd-info b { color: var(--dx-text); } .dx-dd-info b.ok { color: var(--dx-green); } .dx-dd-info b.br { color: var(--dx-brand); } .dx-drawer-tools { display: none; } .dx-ticker { display: flex; align-items: stretch; margin: 0; width: 100%; max-width: none; background: var(--dx-ink); border-radius: 0; overflow: hidden; color: #fff; box-shadow: none; border-bottom: 1px solid rgba(255,255,255,.08); } .dx-ticker-label { background: var(--dx-grad-3); padding: 8px 16px; font-weight: 800; font-size: 12px; letter-spacing: .1em; display: flex; align-items: center; gap: 8px; white-space: nowrap; z-index: 2; } .dx-ticker-label .dot-live { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: dxPulse 1.6s infinite; } .dx-ticker-view { overflow: hidden; flex: 1; display: flex; align-items: center; } .dx-ticker-track { display: flex; width: max-content; will-change: transform; animation: dxScroll var(--dx-tk-dur, 60s) linear infinite; } .dx-ticker-track:hover { animation-play-state: paused; } .dx-tk-item { color: #cfc8f5; padding: 0 22px; font-size: 13px; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.08); } .dx-tk-item b { color: #fff; } .dx-tk-item b.g { color: #34d399; } .dx-tk-item i { color: var(--dx-pink); margin: 0 6px; } .dx-tk-item:hover { background: rgba(255,255,255,.06); color: #fff; } /* inner page banner */ .dx-pagehead { margin: 14px auto 0; max-width: 1200px; } .dx-pagehead .container { background: var(--dx-grad-dark); border-radius: 24px; padding: 26px 30px; position: relative; overflow: hidden; width: auto; } .dx-pagehead .container:before { content: ''; position: absolute; width: 260px; height: 260px; right: -60px; top: -120px; background: var(--dx-pink); filter: blur(70px); opacity: .5; } .dx-crumbs { list-style: none; padding: 0; margin: 0 0 6px; display: flex; gap: 8px; font-size: 12.5px; color: #c4b5fd; position: relative; } .dx-crumbs li + li:before { content: '/'; margin-right: 8px; opacity: .5; } .dx-crumbs a { color: #e9d5ff; } .dx-pagehead-t { color: #fff; font-size: 26px; font-weight: 800; position: relative; letter-spacing: -.01em; } /* hero — mesh + glass */ .dx-hero { background: radial-gradient(600px 400px at 0% 0%, rgba(236,72,153,.55), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgba(6,182,212,.45), transparent 60%), var(--dx-grad-dark); border-radius: 32px; } .dx-hero:before, .dx-hero:after { display: none; } .dx-hero h1 .grad { background: linear-gradient(90deg, #fbbf24, #fb7185, #c084fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dx-hero-badge { background: rgba(255,255,255,.12); backdrop-filter: blur(8px); } .dx-hero-stats b { background: linear-gradient(90deg, #fff, #fbcfe8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dx-ex-card { background: rgba(255,255,255,.96); border-radius: 28px; position: relative; } .dx-ex-card:before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 30px; background: conic-gradient(from 0deg, #ec4899, #7c3aed, #06b6d4, #fbbf24, #ec4899); filter: blur(14px); opacity: .55; animation: dxSpin 8s linear infinite; } @keyframes dxSpin { to { transform: rotate(360deg); } } .dx-ex-card h2 i { color: var(--dx-pink); } .dx-select { background: var(--dx-bg); } /* colorful feature cards */ .dx-feat { position: relative; overflow: hidden; } .dx-feat:before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--dx-grad); } .dx-feat:nth-child(2):before { background: var(--dx-grad-3); } .dx-feat:nth-child(3):before { background: var(--dx-grad-4); } .dx-feat:nth-child(4):before { background: var(--dx-grad-2); } .dx-feat:nth-child(1) .dx-ico { background: var(--dx-grad); } .dx-feat:nth-child(2) .dx-ico { background: var(--dx-grad-3); } .dx-feat:nth-child(3) .dx-ico { background: var(--dx-grad-4); } .dx-feat:nth-child(4) .dx-ico { background: var(--dx-grad-2); } .dx-step { background: var(--dx-ink-2); border: 1px solid rgba(255,255,255,.06); } .dx-step:nth-child(1) { background: linear-gradient(160deg, #3b0764, #14122e); } .dx-step:nth-child(2) { background: linear-gradient(160deg, #831843, #14122e); } .dx-step:nth-child(3) { background: linear-gradient(160deg, #164e63, #14122e); } .dx-step:nth-child(4) { background: linear-gradient(160deg, #064e3b, #14122e); } .dx-sec-head .eyebrow { background: var(--dx-grad); color: #fff; } /* tools */ .dx-tools { margin-top: 26px; } .dx-tool-card { background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 24px; padding: 26px; box-shadow: var(--dx-shadow); height: calc(100% - 22px); margin-bottom: 22px; } .dx-tool-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; } .dx-tool-head h3 { margin: 0; font-size: 19px; } .dx-tool-head p { margin: 2px 0 0; color: var(--dx-muted); font-size: 13px; } .dx-tool-head .ic { width: 50px; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; flex: 0 0 auto; } .ic.c1 { background: var(--dx-grad); } .ic.c2 { background: var(--dx-grad-3); } .dx-calc label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dx-muted); margin: 10px 0 6px; display: block; } .dx-calc-row { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 8px; align-items: end; } .dx-calc-eq { text-align: center; color: var(--dx-pink); padding-bottom: 14px; } .dx-calc-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; font-size: 12.5px; color: var(--dx-muted); } .dx-calc-meta i { color: var(--dx-brand); } .dx-note { display: block; margin-top: 10px; } .dx-mini-feat { list-style: none; padding: 0; margin: 16px 0; } .dx-mini-feat li { padding: 6px 0; color: var(--dx-muted); font-size: 14px; } .dx-mini-feat i { color: var(--dx-green); margin-right: 8px; } .dx-app-promo { display: flex; align-items: center; gap: 12px; background: var(--dx-grad-dark); color: #fff; border-radius: 16px; padding: 14px; } .dx-app-promo i.fa-mobile { font-size: 34px; color: #fbbf24; } .dx-app-promo small { color: #c4b5fd !important; } .dx-app-promo > div { flex: 1; } /* methods */ .dx-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .dx-method { background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 18px; padding: 18px 10px; text-align: center; color: var(--dx-text); font-weight: 700; font-size: 13.5px; transition: .25s; box-shadow: var(--dx-shadow); } .dx-method img { width: 48px; height: 48px; object-fit: contain; display: block; margin: 0 auto 8px; } .dx-method:hover { transform: translateY(-6px) scale(1.03); border-color: var(--dx-pink); color: var(--dx-brand); } /* faq */ .dx-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; } .dx-faq details { background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 16px; padding: 0 20px; box-shadow: var(--dx-shadow); } .dx-faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; } .dx-faq summary::-webkit-details-marker { display: none; } .dx-faq summary:after { content: '+'; width: 28px; height: 28px; border-radius: 50%; background: var(--dx-brand-soft); color: var(--dx-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; transition: .25s; } .dx-faq details[open] summary:after { content: '−'; background: var(--dx-grad); color: #fff; } .dx-faq details[open] { border-color: var(--dx-brand-line); } .dx-faq p { color: var(--dx-muted); padding-bottom: 18px; margin: 0; } /* reveal animation */ .dx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .dx-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .dx-reveal { opacity: 1; transform: none; transition: none; } .dx-ex-card:before, .dx-ticker-track, .dx-strip .dx-track { animation: none; } } /* footer extras */ .dx-cta { background: var(--dx-grad-3); } .dx-footer { background: linear-gradient(180deg, #0b0b1e, #14122e) !important; } .dx-social a:hover { background: var(--dx-grad); } /* floating support + cookie + toast */ .dx-fab-wrap { position: fixed; left: 18px; bottom: 22px; z-index: 990; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .dx-fab-main { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--dx-grad-4); color: #fff; font-size: 24px; box-shadow: 0 14px 28px -8px rgba(16,185,129,.7); cursor: pointer; } .dx-fab-main:after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #10b981; animation: dxRing 2s infinite; } @keyframes dxRing { to { transform: scale(1.5); opacity: 0; } } .dx-fab-list { display: none; flex-direction: column; gap: 8px; } .dx-fab-wrap.open .dx-fab-list { display: flex; } .dx-fab-list a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 999px; color: #fff !important; font-weight: 700; font-size: 13px; box-shadow: var(--dx-shadow); } .dx-fab-list a i { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; } .dx-fab-list .wa { background: #25d366; } .dx-fab-list .tg { background: #229ed9; } .dx-fab-list .ph { background: var(--dx-grad-3); } .dx-fab-list .ms { background: var(--dx-grad); } .dx-cookie { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 1100; width: min(720px, calc(100% - 24px)); background: var(--dx-ink); color: #d9d2fb; border-radius: 18px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--dx-shadow-lg); font-size: 13.5px; } .dx-cookie a { color: #f9a8d4; } .dx-cookie i { color: var(--dx-green); } .dx-toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: var(--dx-ink); color: #fff; padding: 11px 20px; border-radius: 999px; z-index: 1200; opacity: 0; pointer-events: none; transition: .3s; font-weight: 600; font-size: 14px; } .dx-toast.on { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 767px) { body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .dx-fab-wrap { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); left: 12px; } .dx-fab-main { width: 48px; height: 48px; font-size: 20px; } .scrollup { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } .dx-cookie { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); flex-direction: column; text-align: center; } .dx-nav .dx-nav-in { height: 58px; padding: 0 8px 0 16px; } .dx-nav { top: 4px; } .dx-calc-row { grid-template-columns: 1fr; } .dx-calc-eq { transform: rotate(90deg); padding: 0; } .dx-pagehead .container { padding: 20px; border-radius: 20px; } .dx-pagehead-t { font-size: 21px; } .dx-drawer-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .dx-tool { flex: 1; padding: 11px; border-radius: 12px; border: 1px solid var(--dx-line); background: var(--dx-bg); font-weight: 700; color: var(--dx-text); } .dx-auth .dx-icon-btn[data-dx-theme] { display: none; } } @media (max-width: 991px) { .dx-drawer-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .dx-tool { flex: 1; padding: 11px; border-radius: 12px; border: 1px solid var(--dx-line); background: var(--dx-bg); font-weight: 700; color: var(--dx-text); } } /* standalone (installed PWA) tweaks */ @media (display-mode: standalone) { .dx-top { padding-top: env(safe-area-inset-top, 0px); } .dx-install-btn, [data-dx-install] { display: none !important; } } /* =================================================================== DARK MODE =================================================================== */ html[data-theme="dark"] { --dx-bg: #0b0b1e; --dx-surface: #15132e; --dx-line: #2a2650; --dx-text: #f1ecff; --dx-muted: #a39cc9; --dx-brand-soft: rgba(124,58,237,.18); --dx-brand-line: rgba(167,139,250,.35); --dx-ok-soft: rgba(16,185,129,.15); --dx-bad-soft: rgba(240,62,62,.15); --dx-warn-soft: rgba(251,191,36,.14); --dx-shadow: 0 12px 34px -14px rgba(0,0,0,.7); --dx-shadow-lg: 0 34px 70px -24px rgba(0,0,0,.85); --card-bg: #15132e; --card-border: #2a2650; --text-main: #f1ecff; --text-muted: #a39cc9; --dark-bg: #0b0b1e; color-scheme: dark; } html[data-theme="dark"] body { background: radial-gradient(900px 500px at 8% -5%, rgba(236,72,153,.14), transparent 60%), radial-gradient(900px 600px at 100% 0%, rgba(124,58,237,.2), transparent 60%), #0b0b1e !important; color: var(--dx-text) !important; } html[data-theme="dark"] .dx-nav .dx-nav-in { background: rgba(21,19,46,.85); } html[data-theme="dark"] .dx-menu li a, html[data-theme="dark"] .dropdown-menu > li > a { color: var(--dx-text); } html[data-theme="dark"] .dx-burger { background: var(--dx-surface); } html[data-theme="dark"] .dx-burger span, html[data-theme="dark"] .dx-burger span:before, html[data-theme="dark"] .dx-burger span:after { background: #fff; } html[data-theme="dark"] .dx-menu { background: #15132e; } html[data-theme="dark"] .dx-ex-card { background: rgba(21,19,46,.97); color: var(--dx-text); } html[data-theme="dark"] .dx-select { background: #0f0d26; } html[data-theme="dark"] .dx-select:hover, html[data-theme="dark"] .dx-select.open { background: #1b1840; } html[data-theme="dark"] .dx-list, html[data-theme="dark"] .dx-item img, html[data-theme="dark"] .dx-select .cur img { background: #1b1840; border-color: var(--dx-line); } html[data-theme="dark"] .dx-item:hover { background: var(--dx-brand-soft); color: #e9d5ff; } html[data-theme="dark"] .dx-strip .logos img, html[data-theme="dark"] .dx-method img, html[data-theme="dark"] .dx-reserve .nm img { background: #fff; } html[data-theme="dark"] .dx-review, html[data-theme="dark"] .about-content-box, html[data-theme="dark"] .affiliate-content-box, html[data-theme="dark"] .help-content-box, html[data-theme="dark"] .contact-info-box, html[data-theme="dark"] .referral_link { background: #100e28; border-color: var(--dx-line); color: var(--dx-text); } html[data-theme="dark"] .dx-review p, html[data-theme="dark"] .about-content-box p, html[data-theme="dark"] .help-card p, html[data-theme="dark"] .affiliate-content-box p { color: #cfc8f5; } html[data-theme="dark"] .dx-news-i a, html[data-theme="dark"] .dx-method, html[data-theme="dark"] .dx-reserve .nm { color: var(--dx-text); } html[data-theme="dark"] .widget, html[data-theme="dark"] .panel, html[data-theme="dark"] .well, html[data-theme="dark"] .box, html[data-theme="dark"] .help-card, html[data-theme="dark"] .quick-btn, html[data-theme="dark"] .modern-review-card, html[data-theme="dark"] .exchange-list-card, html[data-theme="dark"] #acc_user_menu, html[data-theme="dark"] .table-responsive, html[data-theme="dark"] .dx-live-wrap, html[data-theme="dark"] .dx-strip, html[data-theme="dark"] .dx-feat, html[data-theme="dark"] .dx-tool-card, html[data-theme="dark"] .dx-method, html[data-theme="dark"] .dx-faq details, html[data-theme="dark"] .exchange-card-box, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .modal-body { background: var(--dx-surface) !important; border-color: var(--dx-line) !important; color: var(--dx-text) !important; } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .panel-heading { background: #1b1840 !important; border-color: var(--dx-line) !important; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] label, html[data-theme="dark"] .modal-title, html[data-theme="dark"] .currency-code-box, html[data-theme="dark"] .extitle { color: var(--dx-text) !important; } html[data-theme="dark"] .dx-hero h1, html[data-theme="dark"] .dx-pagehead-t, html[data-theme="dark"] .dx-cta h3, html[data-theme="dark"] .dx-step h4, html[data-theme="dark"] .dx-footer h5 { color: #fff !important; } html[data-theme="dark"] .dx-hero h1 .grad { color: transparent !important; } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] span { border-color: var(--dx-line); } html[data-theme="dark"] .form-control, html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=tel], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .reflink_textbox { background: #0f0d26 !important; color: var(--dx-text) !important; border-color: var(--dx-line) !important; } html[data-theme="dark"] .form-control::placeholder { color: #7f78a8; } html[data-theme="dark"] .input-group-addon { background: #1b1840 !important; color: #c4b5fd !important; border-color: var(--dx-line) !important; } html[data-theme="dark"] .table, html[data-theme="dark"] table.btb td, html[data-theme="dark"] .table > tbody > tr > td { background: transparent !important; color: var(--dx-text) !important; border-color: var(--dx-line) !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd), html[data-theme="dark"] tr.row_odd { background: rgba(255,255,255,.03) !important; } html[data-theme="dark"] tr.row_even { background: transparent; } html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] table.btb th { background: #1b1840 !important; color: #e9d5ff !important; } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dx-menu li a:hover { background: var(--dx-brand-soft); } html[data-theme="dark"] .btn-default, html[data-theme="dark"] a.login, html[data-theme="dark"] .dx-icon-btn, html[data-theme="dark"] .btn-action-more { background: var(--dx-surface) !important; color: var(--dx-text) !important; border-color: var(--dx-line) !important; } html[data-theme="dark"] .dx-btn-ghost { background: rgba(255,255,255,.08); color: #e9d5ff !important; border-color: rgba(255,255,255,.2); } html[data-theme="dark"] .alert-success { color: #6ee7b7 !important; border-color: rgba(16,185,129,.4) !important; } html[data-theme="dark"] .alert-danger { color: #fda4af !important; border-color: rgba(240,62,62,.4) !important; } html[data-theme="dark"] .alert-warning { color: #fcd34d !important; border-color: rgba(251,191,36,.4) !important; } html[data-theme="dark"] .alert-info { color: #d8b4fe !important; } html[data-theme="dark"] .dot { background: #1b1840 !important; border-color: var(--dx-line) !important; color: #c4b5fd !important; } html[data-theme="dark"] .dot.current { background: var(--dx-grad) !important; color: #fff !important; } html[data-theme="dark"] .dot.disabled { background: #100e28 !important; color: #6f689a !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] small, html[data-theme="dark"] .help-block, html[data-theme="dark"] .currency-name-sub { color: var(--dx-muted) !important; } html[data-theme="dark"] .nav-tabs > li > a { color: var(--dx-muted); } html[data-theme="dark"] .pagination > li > a { background: var(--dx-surface); color: var(--dx-text); border-color: var(--dx-line); } html[data-theme="dark"] [style*="background:#f8f9ff"], html[data-theme="dark"] [style*="background: #f8f9ff"] { background: #100e28 !important; color: var(--dx-text) !important; } html[data-theme="dark"] [style*="color:#0f1530"], html[data-theme="dark"] [style*="color: #0f1530"], html[data-theme="dark"] [style*="color:#4a5280"], html[data-theme="dark"] [style*="color:#6b7391"] { color: var(--dx-text) !important; } html[data-theme="dark"] .dx-dd-info { color: var(--dx-muted); } html[data-theme="dark"] .dx-unl, html[data-theme="dark"] .reserve-tag { background: rgba(16,185,129,.15); color: #6ee7b7; border-color: rgba(16,185,129,.35); } html[data-theme="dark"] .dx-notice { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.35); } html[data-theme="dark"] .dx-notice marquee { color: #fcd34d; } html[data-theme="dark"] .dx-live-wrap .dx-live-body { color: var(--dx-text); } html[data-theme="dark"] .scrollup { background: var(--dx-grad) !important; } html[data-theme="dark"] .dx-toast, html[data-theme="dark"] .dx-cookie { background: #1b1840; border: 1px solid var(--dx-line); } html[data-theme="dark"] img[src*="logo.png"] { filter: brightness(0) invert(1); } html[data-theme="dark"] .dx-footer img { filter: brightness(0) invert(1); } /* nav fit on laptops */ .dx-menu { min-width: 0; gap: 0; } .dx-menu li a { padding: 9px 11px; font-size: 13.5px; } @media (min-width: 992px) and (max-width: 1329px) { .dx-menu li a i { display: none; } .dx-menu li a { padding: 9px 9px; font-size: 13px; } .dx-auth { gap: 6px; } a.login, a.signup { padding: 8px 12px; font-size: 13px; } } .dx-nav .container { padding-left: 0; padding-right: 0; } @media (max-width: 1230px) { .dx-nav .container { padding: 0 12px; } } @media (min-width: 992px) { html[data-theme="dark"] .dx-menu { background: transparent; } } /* ---- v3.1 fixes: no horizontal overflow on phones, cookie bar, FAB overlap ---- */ html, body { max-width: 100%; overflow-x: clip; } #wrapper, #body-ctnr, .container { max-width: 100%; } .dx-strip .logos { min-width: 0; width: 100%; max-width: 100%; } .dx-strip { max-width: 100%; } .dx-ticker, .dx-ticker-view { min-width: 0; max-width: 100%; } .dx-hero, .dx-ex-card, .dx-tool-card, .widget { max-width: 100%; } .dx-calc .input-group, .dx-calc .form-control { min-width: 0; } .dx-calc select.form-control { width: 100%; text-overflow: ellipsis; } .dx-cookie { left: 12px; right: 12px; transform: none; width: auto; max-width: 720px; margin: 0 auto; box-sizing: border-box; } .dx-cookie > div { min-width: 0; white-space: normal; line-height: 1.5; flex: 1; } .dx-cookie .dx-btn { flex: 0 0 auto; } @media (max-width: 767px) { .dx-cookie { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; } .dx-cookie .dx-btn { width: 100%; } .dx-fab-wrap { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } } /* =================================================================== v3.2 — mobile drawer fix, app-bar support sheet =================================================================== */ /* the drawer is moved to on phones; make sure it sits above everything */ @media (max-width: 991px) { .dx-nav .dx-nav-in { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; } html[data-theme="dark"] .dx-nav .dx-nav-in { background: #15132e; } .dx-overlay { z-index: 1998; } body > .dx-menu, .dx-menu.open { position: fixed; top: 0; bottom: 0; right: -320px; left: auto; width: 300px; max-width: 86vw; height: 100%; z-index: 1999; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; background: #fff; padding: 76px 16px 24px; gap: 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -20px 0 50px rgba(10,15,36,.35); transition: right .32s ease; list-style: none; margin: 0; } body > .dx-menu.open { right: 0; } body > .dx-menu li { width: 100%; } body > .dx-menu li a { display: block; padding: 13px 14px; border-radius: 14px; font-size: 15px; color: var(--dx-text); } body > .dx-menu li.active a, body > .dx-menu li a:hover { background: var(--dx-grad); color: #fff !important; } body > .dx-menu li.active a i, body > .dx-menu li a:hover i { color: #fff; } body > .dx-menu .dx-drawer-head { display: flex; position: absolute; top: 14px; left: 16px; right: 16px; width: auto; align-items: center; justify-content: space-between; } body > .dx-menu .dx-drawer-auth { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--dx-line); } body > .dx-menu .dx-drawer-auth a { flex: 1; text-align: center; } html[data-theme="dark"] body > .dx-menu { background: #15132e; } .dx-burger { position: relative; z-index: 2; } } /* =================================================================== v3.3 — app bar with WhatsApp + Live chat, widget fixes, rates page =================================================================== */ /* desktop floating WhatsApp (left) — Tawk stays on the right */ .dx-wa-float { position: fixed; left: 20px; bottom: 22px; z-index: 990; display: inline-flex; align-items: center; height: 56px; padding: 0; border-radius: 999px; background: linear-gradient(135deg, #25d366, #0e9f6e); color: #fff !important; box-shadow: 0 14px 28px -10px rgba(14,159,110,.75); overflow: hidden; max-width: 56px; transition: max-width .35s ease, box-shadow .25s; text-decoration: none !important; } .dx-wa-float i { flex: 0 0 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; } .dx-wa-float span { white-space: nowrap; font-weight: 800; font-size: 13.5px; padding-right: 20px; } .dx-wa-float:hover { max-width: 280px; box-shadow: 0 18px 34px -10px rgba(14,159,110,.9); } .dx-wa-float:before { content: ''; position: absolute; inset: 0; border-radius: 999px; border: 2px solid #25d366; animation: dxRing 2.2s infinite; pointer-events: none; } @media (max-width: 767px) { .dx-wa-float { display: none !important; } } /* =================================================================== v4 — NEW mobile bottom dock (WhatsApp + Live chat live inside "সাপোর্ট") =================================================================== */ .dx-bottom, .dx-sheet, .dx-sheet-bg { display: none; } /* desktop floating WhatsApp stays (left) — phones use the dock */ @media (max-width: 767px) { body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .dx-bottom { display: grid; grid-template-columns: 1fr 1fr 74px 1fr 1fr; align-items: end; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1000; height: 66px; padding: 0 6px; border-radius: 24px; background: rgba(255,255,255,.96); border: 1px solid var(--dx-brand-line); box-shadow: 0 18px 40px -14px rgba(76,29,149,.45), 0 2px 0 rgba(255,255,255,.8) inset; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .dx-bottom .dk { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; color: var(--dx-muted); font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .dx-bottom .dk i { font-size: 21px; line-height: 1; transition: transform .2s, color .2s; } .dx-bottom .dk span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .dx-bottom .dk:active i { transform: scale(.85); } .dx-bottom .dk.on { color: var(--dx-brand); } /* centre exchange button */ .dx-bottom .dk-fab { grid-column: 3; justify-self: center; align-self: start; position: relative; display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-top: -26px; border-radius: 50%; color: #fff !important; text-decoration: none !important; background: linear-gradient(135deg, #7c3aed 0%, #c026d3 55%, #ec4899 100%); box-shadow: 0 0 0 6px var(--dx-bg), 0 14px 26px -8px rgba(192,38,211,.75); -webkit-tap-highlight-color: transparent; transition: transform .2s; } .dx-bottom .dk-fab i { font-size: 25px; } .dx-bottom .dk-fab:active { transform: scale(.92); } .dx-bottom .dk-fab:after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(192,38,211,.55); animation: dxRing 2.4s infinite; pointer-events: none; } .dx-bottom .dk-fabl { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; color: var(--dx-brand); pointer-events: none; } /* support button: the green dot says "online" */ .dx-bottom .dk-sup i { color: #0e9f6e; } .dx-bottom .dk-sup { color: #0e9f6e; } .dx-bottom .dk-sup:after { content: ''; position: absolute; top: 12px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; animation: dxPulse 1.8s infinite; } .dx-bottom .dk-sup.on { color: var(--dx-brand); } .dx-bottom .dk-sup.on i { color: var(--dx-brand); } html.dx-chat-open .dx-bottom { display: none !important; } .scrollup { bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important; right: 14px; } .dx-cookie { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } .dx-toast { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); } /* Tawk bubble / 3rd-party WhatsApp widgets never float on phones — they live in the dock */ html:not(.dx-chat-open) body > div.widget-visible, html:not(.dx-chat-open) body > div[id^="tawk"], html:not(.dx-chat-open) body > div[class*="tawk"], html:not(.dx-chat-open) body > iframe[title*="chat widget" i], body > iframe[src*="delightchat"], body > div[id*="wa-widget" i], body > div[class*="wa-widget" i], body > a[href*="wa.me"]:not(.dx-wa-float) { display: none !important; } /* ----- support sheet ----- */ .dx-sheet-bg { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(10,15,36,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; } .dx-sheet-bg.on { opacity: 1; pointer-events: auto; } .dx-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; margin: 0 auto; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--dx-surface); border-radius: 28px 28px 0 0; padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 50px rgba(10,15,36,.35); transform: translateY(108%); transition: transform .32s cubic-bezier(.2,.8,.2,1); visibility: hidden; } .dx-sheet.open { transform: none; visibility: visible; } .dx-sheet-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--dx-line); margin: 0 auto 14px; } .dx-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .dx-sheet-title { font-weight: 800; font-size: 18px; color: var(--dx-text); line-height: 1.25; } .dx-sheet-title small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--dx-muted); margin-top: 2px; } .dx-sheet-title small:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: dxPulse 1.8s infinite; } .dx-sheet-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--dx-bg); color: var(--dx-muted); font-size: 16px; cursor: pointer; } .dx-sheet-main { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .dx-sheet-main > * { grid-column: span 1; } .dx-sheet-main > *:only-child { grid-column: 1 / -1; } .dx-sheet .big { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; border: 0; cursor: pointer; font-family: inherit; padding: 16px 14px 14px; border-radius: 20px; color: #fff !important; text-decoration: none !important; min-height: 118px; -webkit-tap-highlight-color: transparent; } .dx-sheet .big:before { content: ''; position: absolute; width: 110px; height: 110px; right: -34px; top: -34px; border-radius: 50%; background: rgba(255,255,255,.16); } .dx-sheet .big i { position: relative; width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 8px; } .dx-sheet .big b { position: relative; font-size: 16px; font-weight: 800; line-height: 1.2; } .dx-sheet .big small { position: relative; font-size: 12px; color: rgba(255,255,255,.9) !important; line-height: 1.3; } .dx-sheet .big.wa { background: linear-gradient(135deg, #25d366, #0b8f62); box-shadow: 0 14px 24px -12px rgba(14,159,110,.9); } .dx-sheet .big.ch { background: linear-gradient(135deg, #7c3aed, #06b6d4); box-shadow: 0 14px 24px -12px rgba(124,58,237,.9); } .dx-sheet .big:active { transform: scale(.98); } .dx-sheet-list { display: flex; flex-direction: column; gap: 8px; } .dx-sheet .srow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; background: var(--dx-bg); border: 1px solid var(--dx-line); color: var(--dx-text) !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .dx-sheet .srow i.ic { flex: 0 0 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; } .dx-sheet .srow .tx { flex: 1; min-width: 0; line-height: 1.25; } .dx-sheet .srow .tx b { display: block; font-size: 14.5px; font-weight: 800; } .dx-sheet .srow .tx small { display: block; font-size: 12px; color: var(--dx-muted); } .dx-sheet .srow i.go { color: var(--dx-muted); font-size: 18px; } .dx-sheet .srow:active { background: var(--dx-brand-soft); } .dx-sheet .srow .ic.tr { background: linear-gradient(135deg, #0ea5e9, #6366f1); } .dx-sheet .srow .ic.tg { background: linear-gradient(135deg, #229ed9, #3b82f6); } .dx-sheet .srow .ic.ph { background: var(--dx-grad-3); } .dx-sheet .srow .ic.ms { background: var(--dx-grad); } } @media (min-width: 768px) { .dx-bottom, .dx-sheet, .dx-sheet-bg { display: none !important; } } /* dark */ html[data-theme="dark"] .dx-bottom { background: rgba(21,19,46,.95); border-color: var(--dx-line); box-shadow: 0 18px 40px -14px rgba(0,0,0,.7); } html[data-theme="dark"] .dx-bottom .dk { color: #a6a9c9; } html[data-theme="dark"] .dx-bottom .dk.on, html[data-theme="dark"] .dx-bottom .dk-fabl { color: #c4b5fd; } html[data-theme="dark"] .dx-bottom .dk-sup, html[data-theme="dark"] .dx-bottom .dk-sup i { color: #4ade80; } html[data-theme="dark"] .dx-bottom .dk-sup:after { border-color: #15132e; } html[data-theme="dark"] .dx-sheet { background: #15132e; } html[data-theme="dark"] .dx-sheet .srow, html[data-theme="dark"] .dx-sheet-x { background: #1d1a3d; } /* =================================================================== v4 — Today's exchange rates page (rates.php) =================================================================== */ .rt-hero { position: relative; overflow: hidden; border-radius: 28px; padding: 24px 24px 22px; margin: 6px 0 16px; color: #fff; background: radial-gradient(480px 300px at 0% 0%, rgba(236,72,153,.5), transparent 60%), radial-gradient(520px 340px at 100% 100%, rgba(6,182,212,.42), transparent 60%), var(--dx-grad-dark); box-shadow: var(--dx-shadow-lg); } .rt-hero:after { content: '$'; position: absolute; right: 18px; bottom: -46px; font-size: 190px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.06); pointer-events: none; } .rt-hero > * { position: relative; z-index: 1; } .rt-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rt-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; } .rt-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: dxPulse 1.6s infinite; } .rt-xml { color: #fff !important; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 12.5px; text-decoration: none !important; } .rt-xml:hover { background: #fff; color: var(--dx-brand) !important; } .rt-hero h1 { color: #fff !important; font-size: 32px; font-weight: 800; margin: 16px 0 4px; letter-spacing: -.01em; } .rt-hero h1 .grad { background: linear-gradient(90deg, #fde68a, #fb7185, #c084fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rt-date { margin: 0 0 14px !important; color: #d6d0f7; font-size: 13.5px; } .rt-date i { margin-right: 4px; color: #a5b4fc; } .rt-stats { display: flex; gap: 10px; margin-bottom: 16px; } .rt-stat { flex: 1 1 0; max-width: 170px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); line-height: 1.2; } .rt-stat b { display: block; font-size: 19px; font-weight: 800; color: #fff; } .rt-stat small { display: block; font-size: 11.5px; color: #d9d3fa !important; opacity: 1; } .rt-search { position: relative; max-width: 560px; } .rt-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #a5b4fc; pointer-events: none; } .rt-search input { width: 100%; height: 48px; border-radius: 16px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.13); color: #fff; padding: 0 42px 0 44px; outline: none; font-size: 14.5px; font-family: inherit; } .rt-search input::placeholder { color: #c4b5fd; } .rt-search input:focus { background: rgba(255,255,255,.2); border-color: #fff; } .rt-search button { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; } .rt-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; margin: 0 -2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rt-chips::-webkit-scrollbar { display: none; } .rt-chips button { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--dx-line); background: var(--dx-surface); color: var(--dx-text); font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; transition: .2s; } .rt-chips button:hover { border-color: var(--dx-brand-line); color: var(--dx-brand); } .rt-chips button.on { background: var(--dx-grad); color: #fff; border-color: transparent; box-shadow: 0 10px 18px -10px rgba(124,58,237,.8); } .rt-group { margin-bottom: 24px; } .rt-gtitle { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; font-weight: 800; font-size: 16px; color: var(--dx-text); } .rt-gtitle img { width: 32px !important; height: 32px !important; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 6px 14px -6px rgba(124,58,237,.6); } .rt-gtitle em { font-style: normal; margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--dx-brand); background: var(--dx-brand-soft); padding: 3px 10px; border-radius: 999px; } .rt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .rt-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 22px; box-shadow: var(--dx-shadow); cursor: pointer; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; } .rt-card:before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--dx-grad); opacity: .85; } .rt-card:hover { transform: translateY(-3px); border-color: var(--dx-brand-line); box-shadow: 0 22px 38px -18px rgba(124,58,237,.5); } .rt-pair { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); align-items: center; gap: 8px; } .rt-cur { display: flex; align-items: center; gap: 10px; min-width: 0; } .rt-cur img { flex: 0 0 auto; width: 40px !important; height: 40px !important; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 6px 14px -6px rgba(30,30,110,.4); } .rt-ct { min-width: 0; } .rt-ct .amt { font-size: 17px; font-weight: 800; color: var(--dx-text); line-height: 1.2; word-break: break-word; } .rt-ct .amt span { font-size: 12.5px; font-weight: 800; color: var(--dx-muted); } .rt-cur.to .amt { color: var(--dx-green); } .rt-cur.to .amt span { color: var(--dx-green); opacity: .8; } .rt-ct .sub { font-size: 11.5px; color: var(--dx-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-mid { width: 34px; height: 34px; border-radius: 50%; background: var(--dx-brand-soft); color: var(--dx-brand); display: flex; align-items: center; justify-content: center; font-size: 14px; border: 1px solid var(--dx-brand-line); } .rt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--dx-line); } .rt-res { display: flex; align-items: center; gap: 9px; min-width: 0; } .rt-res > i { flex: 0 0 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--dx-ok-soft); color: #0b8a63; font-size: 14px; } .rt-res span { line-height: 1.2; min-width: 0; } .rt-res small { display: block; font-size: 10.5px; font-weight: 700; color: var(--dx-muted); text-transform: uppercase; letter-spacing: .05em; } .rt-res b { display: block; font-size: 13px; font-weight: 800; color: var(--dx-text); word-break: break-word; } .rt-act { display: flex; gap: 8px; flex: 0 0 auto; } .rt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 12px; font-weight: 800; font-size: 13px; white-space: nowrap; text-decoration: none !important; transition: .2s; } .rt-btn.ghost { width: 38px; padding: 0; color: var(--dx-brand) !important; background: var(--dx-brand-soft); border: 1px solid var(--dx-brand-line); } .rt-btn.ghost span { display: none; } .rt-btn.go { color: #fff !important; background: var(--dx-grad); box-shadow: 0 10px 18px -10px rgba(124,58,237,.9); } .rt-btn.go:hover { filter: brightness(1.08); } .rt-btn.ghost:hover { background: var(--dx-brand); color: #fff !important; } .rt-empty { text-align: center; padding: 40px 20px; color: var(--dx-muted); background: var(--dx-surface); border: 1px dashed var(--dx-brand-line); border-radius: 22px; } .rt-empty i { font-size: 32px; color: var(--dx-brand); display: block; margin-bottom: 8px; } #rtNone { display: none; } @media (max-width: 991px) { .rt-list { grid-template-columns: 1fr; } } @media (max-width: 575px) { .rt-hero { padding: 18px 16px; border-radius: 24px; } .rt-hero h1 { font-size: 24px; margin-top: 14px; } .rt-stats { gap: 8px; } .rt-stat { padding: 9px 10px; max-width: none; } .rt-stat b { font-size: 16px; } .rt-card { padding: 14px; border-radius: 20px; } .rt-ct .amt { font-size: 15px; } .rt-cur img { width: 34px !important; height: 34px !important; } .rt-pair { grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); gap: 6px; } .rt-mid { width: 28px; height: 28px; font-size: 12px; } .rt-ct .sub { display: none; } } html[data-theme="dark"] .rt-chips button { background: #15132e; } html[data-theme="dark"] .rt-mid, html[data-theme="dark"] .rt-gtitle em, html[data-theme="dark"] .rt-btn.ghost { background: #221e4a; } html[data-theme="dark"] .rt-res > i { background: rgba(16,185,129,.15); color: #6ee7b7; } html[data-theme="dark"] .rt-chips button.on { background: var(--dx-grad); color: #fff; } /* v5: ticker is the very first thing in the header (all pages) */ .dx-ticker { position: relative; z-index: 3; padding-top: env(safe-area-inset-top, 0px); } .dx-tk-item { display: inline-flex; align-items: center; } @media (max-width: 767px) { .dx-ticker-label { padding: 8px 10px; font-size: 11px; } .dx-tk-item { padding: 0 16px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .dx-ticker-view { overflow-x: auto; } } /* ===================================================================== v6 — ticker JS-driven + live-chat window redesign ===================================================================== */ html.dx-tk-js .dx-ticker-track { animation: none !important; transform: translate3d(0,0,0); touch-action: pan-y; cursor: grab; } html.dx-tk-js .dx-ticker-view { overflow: hidden !important; } .dx-tk-item { transition: background .6s, color .6s; } .dx-tk-item.up b.t { color: #34d399; animation: dxTkUp 1.8s ease; } .dx-tk-item.down b.t { color: #fb7185; animation: dxTkDn 1.8s ease; } @keyframes dxTkUp { 0% { background: rgba(52,211,153,.45); } 100% { background: transparent; } } @keyframes dxTkDn { 0% { background: rgba(251,113,133,.45); } 100% { background: transparent; } } /* ---- Live chat window (third-party iframe: shape, shadow, placement) ---- */ html.dx-chat-on div.widget-visible, html.dx-chat-on body > div[class*="tawk"]:not(.tawk-min-container) { border-radius: 22px !important; overflow: hidden !important; box-shadow: 0 24px 60px -12px rgba(76,29,149,.45), 0 0 0 1px rgba(124,58,237,.18) !important; } html.dx-chat-on div.widget-visible iframe { border-radius: 22px !important; } /* cover strip that replaces the vendor credit line (positioned by JS over the chat iframe) */ .dx-chat-cover { display: none; position: fixed; z-index: 2147483647; pointer-events: none; box-sizing: border-box; background: #fff; color: #6b7391; font: 600 12px/1 'Hind Siliguri','Plus Jakarta Sans',system-ui,sans-serif; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid #efeafc; } .dx-chat-cover i { color: #12b886; font-size: 11px; } .dx-chat-cover b { color: #7c3aed; font-weight: 700; } html.dx-chat-on .dx-chat-cover.on { display: flex; } @media (max-width: 767px) { /* phone: bottom sheet instead of a full-screen takeover */ html.dx-chat-open div.widget-visible, html.dx-chat-open body > div[class*="tawk"]:not(.tawk-min-container) { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: min(86vh, 680px) !important; max-height: calc(100% - 56px) !important; border-radius: 28px 28px 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; } html.dx-chat-open div.widget-visible iframe { width: 100% !important; height: 100% !important; border-radius: 28px 28px 0 0 !important; } html.dx-chat-open div.widget-visible { z-index: 2147483646 !important; } } @media (min-width: 768px) { html.dx-chat-on div.widget-visible { margin: 0 8px 8px 0 !important; } } /* =================================================================== v8 — DARK MODE FIXES (status cards, step-3 boxes, footer text, icon font in headers) =================================================================== */ /* Icon font was being overridden by the header font rule (showed a box instead of the refresh icon) */ .dx-live-head .fa, .dx-live-head i.fa, .dx-w-title .fa, .dx-fbottom .fa { font-family: FontAwesome !important; } /* Light-mode look for boxes that used to be hard-coded inline */ .dx-wait-box { background: #f3e8ff; border: 1px solid #e9d5ff; } .dx-wait-box h4 { color: #4c1d95; } .dx-total-row td { background: #f3e8ff; } .dx-soft-cell { background: #f6f3ff; } .dx-soft-widget { background: #f2f9fc; } /* ---------- Dark mode ---------- */ /* Home: "Status Updates" cards (markup comes from getdata.php) */ html[data-theme="dark"] .exchange-card-box { background: #1b1840 !important; border-color: var(--dx-line) !important; box-shadow: none; } html[data-theme="dark"] .exchange-card-box:hover { border-color: rgba(167,139,250,.5) !important; } html[data-theme="dark"] .exchange-card-box .currency-title, html[data-theme="dark"] .exchange-card-box .currency-title span { color: #f1ecff !important; } html[data-theme="dark"] .exchange-card-box .amount-title { color: #ffffff !important; } html[data-theme="dark"] .exchange-card-box .amount-title sup { color: #b9b2e0 !important; } html[data-theme="dark"] .exchange-card-box .ex-arrow { color: #a78bfa !important; } html[data-theme="dark"] .ex-badge-success { background-color: rgba(16,185,129,.16); color: #6ee7b7; border-color: rgba(16,185,129,.45); } html[data-theme="dark"] .ex-badge-warning { background-color: rgba(251,191,36,.14); color: #fcd34d; border-color: rgba(251,191,36,.4); } html[data-theme="dark"] .ex-badge-danger { background-color: rgba(240,62,62,.16); color: #fda4af; border-color: rgba(240,62,62,.45); } html[data-theme="dark"] .ex-badge-default { background-color: rgba(255,255,255,.08); color: #cfc8f5; border-color: rgba(255,255,255,.2); } html[data-theme="dark"] .exchange-list-container p { color: #a39cc9 !important; } /* Exchange step 3: "Waiting for Payment" box and "Total for pay" row */ html[data-theme="dark"] .dx-wait-box { background: rgba(124,58,237,.2) !important; border-color: rgba(167,139,250,.45) !important; } html[data-theme="dark"] .dx-wait-box h4 { color: #e9d5ff !important; } html[data-theme="dark"] body table tr.dx-total-row td, html[data-theme="dark"] body .table > tbody > tr.dx-total-row > td { background: rgba(124,58,237,.24) !important; } html[data-theme="dark"] .dx-total-row h3.total_pay { color: #ffffff !important; } html[data-theme="dark"] .dx-total-row td + td h3.total_pay { color: #c4b5fd !important; } /* Other pages that had light inline boxes */ html[data-theme="dark"] .dx-soft-cell { background: #1b1840 !important; } html[data-theme="dark"] .dx-soft-widget { background: var(--dx-surface) !important; } html[data-theme="dark"] .modal-content { border: 1px solid var(--dx-line) !important; } html[data-theme="dark"] .modal-content .close { color: #fff; opacity: .8; text-shadow: none; } html[data-theme="dark"] .modal-content p { color: #cfc8f5 !important; } html[data-theme="dark"] .btn-default:hover { background: #221e4a !important; color: #fff !important; } /* Footer text (description, e-mail, phone, copyright) was too dim on dark */ html[data-theme="dark"] .dx-footer, html[data-theme="dark"] .dx-footer p, html[data-theme="dark"] .dx-footer .about, html[data-theme="dark"] .dx-fc, html[data-theme="dark"] .dx-fc div, html[data-theme="dark"] .dx-fbottom, html[data-theme="dark"] .dx-fbottom div { color: #c9cdf2 !important; opacity: 1 !important; } html[data-theme="dark"] .dx-footer a { color: #d6d9f7; } html[data-theme="dark"] .dx-footer a:hover { color: #ffffff; } html[data-theme="dark"] .dx-fbottom strong { color: #ffffff !important; } /* Mobile bottom bar labels: keep readable in dark */ html[data-theme="dark"] .dx-bottom .dk { color: #c7c3e6; opacity: 1; } html[data-theme="dark"] .dx-bottom .dk span { opacity: 1; } html[data-theme="dark"] .dx-bottom .dk.on, html[data-theme="dark"] .dx-bottom .dk.on span { color: #c4b5fd; } html[data-theme="dark"] .dx-bottom .dk-sup, html[data-theme="dark"] .dx-bottom .dk-sup span { color: #4ade80; } /* Keep the last content/copyright line above the floating bottom bar on phones */ @media (max-width: 767px) { .dx-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } } /* v8.1 — white strip around the header/nav in dark mode (legacy ".header { background:#fff }") */ html[data-theme="dark"] .header, html[data-theme="dark"] .header .nav, html[data-theme="dark"] .menu-ctnr { background: transparent !important; background-color: transparent !important; } /* v8.2 — footer links always on top and easy to tap */ .dx-footer { z-index: 5; isolation: isolate; } .dx-footer a, .dx-footer .dx-social a { position: relative; z-index: 2; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: rgba(167,139,250,.35); } .dx-footer ul li a { display: inline-block; padding: 5px 0; } .dx-footer .dx-social a { display: inline-flex; } .dx-cta { pointer-events: none; } .dx-cta a, .dx-cta .dx-btn { pointer-events: auto; } /* v8.3 — Bangla footer headings: no all-caps / wide tracking */ .dx-footer h5 { text-transform: none; letter-spacing: 0; font-size: 16px; } /* ===================================================================== v12 — My Profile redesign (.pf-*) — uses DX tokens, so light/dark auto ===================================================================== */ .pf { padding-bottom: 20px; } .pf-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; align-items: start; } .pf-side { position: sticky; top: 92px; display: grid; gap: 18px; } .pf-main { min-width: 0; display: grid; gap: 20px; } /* hero / identity card */ .pf-hero { position: relative; overflow: hidden; background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 24px; box-shadow: var(--dx-shadow); padding: 0 22px 22px; text-align: center; } .pf-hero-bg { height: 104px; margin: 0 -22px; background: var(--dx-grad-dark); position: relative; overflow: hidden; } .pf-hero-bg:before, .pf-hero-bg:after { content: ''; position: absolute; border-radius: 50%; filter: blur(46px); } .pf-hero-bg:before { width: 190px; height: 190px; right: -50px; top: -90px; background: #7c3aed; opacity: .75; } .pf-hero-bg:after { width: 170px; height: 170px; left: -50px; bottom: -100px; background: #00c2ff; opacity: .5; } .pf-avatar { width: 86px; height: 86px; margin: -43px auto 0; position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--dx-grad); border: 4px solid var(--dx-surface); box-shadow: 0 14px 28px -10px rgba(124,58,237,.65); } .pf-name { margin: 12px 0 2px; font-size: 20px; font-weight: 800; word-break: break-word; } .pf-user { color: var(--dx-muted); font-size: 13.5px; font-weight: 600; } .pf-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 4px; } .pf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; } .pf-badge.ok { background: var(--dx-ok-soft); color: #0a6b4d; border-color: rgba(18,184,134,.35); } .pf-badge.no { background: var(--dx-warn-soft); color: #8a5a00; border-color: rgba(245,159,0,.4); } a.pf-badge:hover { transform: translateY(-1px); } .pf-meter { margin: 16px 0 6px; text-align: left; } .pf-meter-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--dx-muted); font-weight: 600; margin-bottom: 7px; } .pf-meter-top b { color: var(--dx-brand-2); } .pf-bar { height: 8px; border-radius: 99px; background: var(--dx-brand-soft); overflow: hidden; } .pf-bar i { display: block; height: 100%; border-radius: 99px; background: var(--dx-grad); transition: width .8s cubic-bezier(.2,.8,.2,1); } .pf-meta { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--dx-line); text-align: left; display: grid; gap: 10px; } .pf-meta li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--dx-text); min-width: 0; } .pf-meta li i { flex: 0 0 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--dx-brand-soft); color: var(--dx-brand); font-size: 13px; } .pf-meta li span { min-width: 0; overflow-wrap: anywhere; } /* account menu (reuses inc/usermenu.inc.php) */ .pf-nav { background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 20px; box-shadow: var(--dx-shadow); padding: 10px; } .pf-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .pf-nav li a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; color: var(--dx-text); font-weight: 600; font-size: 14.5px; } .pf-nav li a i { width: 20px; text-align: center; color: var(--dx-brand); font-size: 15px; } .pf-nav li a:hover { background: var(--dx-brand-soft); color: var(--dx-brand-2); } .pf-nav li a.on { background: var(--dx-grad); color: #fff; box-shadow: 0 10px 22px -10px rgba(124,58,237,.7); } .pf-nav li a.on i { color: #fff; } .pf-nav li.divider { height: 1px; background: var(--dx-line); margin: 6px 4px; } .pf-nav li a[href$="logout.php"], .pf-nav li a[href$="logout.php"] i { color: var(--dx-bad); } .pf-nav li a[href$="logout.php"]:hover { background: var(--dx-bad-soft); } /* jump chips */ .pf-jump { display: none; } /* cards */ .pf-card { background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 24px; box-shadow: var(--dx-shadow); padding: 26px; scroll-margin-top: 96px; } .pf-card-h { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--dx-line); } .pf-card-h h3 { margin: 0; font-size: 18px; font-weight: 800; } .pf-card-h p { margin: 2px 0 0; color: var(--dx-muted); font-size: 13px; } .pf-ic { flex: 0 0 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; background: var(--dx-grad); box-shadow: 0 10px 20px -8px rgba(124,58,237,.6); } .pf-ic.alt { background: linear-gradient(135deg, #00c2ff, #3b82f6); box-shadow: 0 10px 20px -8px rgba(0,194,255,.6); } .pf-ic.warn { background: var(--dx-grad-gold); color: #3a2300; box-shadow: 0 10px 20px -8px rgba(255,138,0,.6); } /* fields */ .pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px; } .pf-f { min-width: 0; } .pf-full { grid-column: 1 / -1; } .pf-f label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 700; color: var(--dx-text); } .pf-f .req { color: var(--dx-bad); } .pf-in { position: relative; } .pf-in > i:first-child { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--dx-brand); opacity: .75; font-size: 15px; pointer-events: none; width: 18px; text-align: center; } .pf-in .form-control, .pf-in select.form-control { width: 100%; min-height: 50px; padding: 12px 14px 12px 44px; border-radius: 14px !important; font-size: 15px; } .pf-in select.form-control { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; } .pf-caret { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--dx-muted); font-size: 18px; } .pf-in.locked .form-control { background: var(--dx-bg) !important; color: var(--dx-muted) !important; cursor: not-allowed; padding-right: 42px; } .pf-lock { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--dx-muted); font-size: 14px; } .pf-in:focus-within > i:first-child { opacity: 1; } .pf-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--dx-muted); cursor: pointer; } .pf-eye:hover { background: var(--dx-brand-soft); color: var(--dx-brand-2); } .pf-in .form-control[type=password], .pf-in .form-control[type=text]#password, .pf-in .form-control#newpassword, .pf-in .form-control#newpassword2 { padding-right: 50px; } .pf-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--dx-muted); min-height: 1em; } .pf-hint.good { color: var(--dx-ok); font-weight: 600; } .pf-hint.badtxt { color: var(--dx-bad); font-weight: 600; } .pf-tag { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; vertical-align: 1px; } .pf-tag.ok { background: var(--dx-ok-soft); color: #0a6b4d; } .pf-tag.no { background: var(--dx-warn-soft); color: #8a5a00; } /* strength bars */ .pf-str { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 9px; } .pf-str i { height: 5px; border-radius: 99px; background: var(--dx-line); transition: background .25s; } .pf-str i.s1 { background: #f03e3e; } .pf-str i.s2 { background: #ff8a00; } .pf-str i.s3 { background: #fbbf24; } .pf-str i.s4 { background: #12b886; } /* newsletter switch */ .pf-pref { padding: 18px 26px; } .pf-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; cursor: pointer; } .pf-switch-t b { display: block; font-size: 15px; font-weight: 700; } .pf-switch-t b i { color: var(--dx-brand); margin-right: 6px; } .pf-switch-t small { display: block; color: var(--dx-muted); font-size: 13px; font-weight: 500; margin-top: 2px; } .pf-switch input { position: absolute; opacity: 0; pointer-events: none; } .pf-sw { flex: 0 0 54px; height: 30px; border-radius: 99px; background: var(--dx-line); position: relative; transition: background .25s; } .pf-sw:after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.2,.8,.2,1); } .pf-switch input:checked + .pf-sw { background: var(--dx-grad); } .pf-switch input:checked + .pf-sw:after { transform: translateX(24px); } .pf-switch input:focus-visible + .pf-sw { box-shadow: 0 0 0 4px rgba(124,58,237,.25); } /* buttons */ .pf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .pf-card .pf-actions { margin-top: 22px; } .pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 28px; border: 0; border-radius: 14px; font-family: var(--dx-font); font-size: 15px; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s, filter .2s; } .pf-btn-main { color: #fff !important; background: var(--dx-grad); box-shadow: 0 14px 26px -10px rgba(124,58,237,.75); } .pf-btn-main:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 20px 32px -12px rgba(124,58,237,.8); } .pf-btn-dark { color: #fff !important; background: var(--dx-grad-dark); box-shadow: 0 14px 26px -12px rgba(10,15,36,.7); } .pf-btn-dark:hover { transform: translateY(-2px); filter: brightness(1.15); } .pf-btn-ghost { color: var(--dx-brand-2) !important; background: var(--dx-brand-soft); border: 1px solid var(--dx-brand-line); } .pf-btn-ghost:hover { transform: translateY(-2px); } .pf-btn.busy { opacity: .65; pointer-events: none; } /* toast / messages */ .pf-toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; margin-bottom: 18px; transition: opacity .4s, transform .4s; } .pf-toast > i { font-size: 20px; margin-top: 1px; } .pf-toast > span { flex: 1; } .pf-toast button { border: 0; background: transparent; font-size: 22px; line-height: 1; color: inherit; opacity: .6; cursor: pointer; } .pf-toast.ok { background: var(--dx-ok-soft); color: #0a6b4d; border-color: rgba(18,184,134,.4); } .pf-toast.bad { background: var(--dx-bad-soft); color: #b02424; border-color: rgba(240,62,62,.35); } .pf-toast.inline { margin: 0 0 18px; } .pf-toast.out { opacity: 0; transform: translateY(-8px); } .pf > .pf-toast { max-width: 100%; } .pf-main > .pf-toast { margin-bottom: 0; } /* dark mode */ html[data-theme="dark"] .pf-badge.ok, html[data-theme="dark"] .pf-tag.ok, html[data-theme="dark"] .pf-toast.ok { color: #6ee7b7; } html[data-theme="dark"] .pf-badge.no, html[data-theme="dark"] .pf-tag.no { color: #fcd34d; } html[data-theme="dark"] .pf-toast.bad { color: #fda4af; } html[data-theme="dark"] .pf-meter-top b, html[data-theme="dark"] .pf-btn-ghost { color: #d8b4fe !important; } html[data-theme="dark"] .pf-nav li a:hover { color: #e9d5ff; } html[data-theme="dark"] .pf-in.locked .form-control { background: #0f0d26 !important; } html[data-theme="dark"] .pf-avatar { border-color: var(--dx-surface); } /* tablet & phone */ @media (max-width: 991px) { .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pf-side { position: static; gap: 12px; } .pf-nav { padding: 6px; border-radius: 18px; } .pf-nav ul { display: flex; overflow-x: auto; gap: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pf-nav ul::-webkit-scrollbar { display: none; } .pf-nav li { flex: 0 0 auto; } .pf-nav li.divider { width: 1px; height: auto; margin: 6px 2px; } .pf-nav li a { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; gap: 8px; } .pf-nav li a i { width: auto; } .pf-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 64px; z-index: 20; padding: 8px 2px; margin: -4px 0 0; background: var(--dx-bg); } .pf-jump::-webkit-scrollbar { display: none; } .pf-jump a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 99px; background: var(--dx-surface); border: 1px solid var(--dx-line); color: var(--dx-text); font-size: 13px; font-weight: 700; } .pf-jump a i { color: var(--dx-brand); } .pf-card { scroll-margin-top: 130px; } } @media (max-width: 640px) { .pf-hero { border-radius: 20px; padding: 0 16px 18px; } .pf-hero-bg { margin: 0 -16px; height: 84px; } .pf-avatar { width: 76px; height: 76px; margin-top: -38px; font-size: 26px; } .pf-card { padding: 18px 16px; border-radius: 20px; } .pf-card-h { margin-bottom: 18px; padding-bottom: 14px; } .pf-ic { flex-basis: 42px; height: 42px; font-size: 17px; } .pf-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pf-in .form-control { font-size: 16px; } /* stops iOS zoom on focus */ .pf-pref { padding: 16px; } .pf-actions { flex-direction: column-reverse; } .pf-btn { width: 100%; } .pf-main { padding-bottom: 96px; } /* clear the mobile bottom dock */ } @media (prefers-reduced-motion: reduce) { .pf *, .pf *:before, .pf *:after { transition: none !important; animation: none !important; } } /* v13 — footer CTA card ("আজই শুরু করুন…") was being painted UNDER the footer (footer z-index:5 > CTA z-index:3), hiding its lower half and the button. Put the CTA above the footer. */ .dx-cta { z-index: 8; } /* v14 — CTA card: no more overlap with the footer (button could never be hidden again) */ .dx-cta { margin-bottom: 28px !important; z-index: auto !important; } .dx-footer { padding-top: 64px !important; } /* v14 — Dashboard (myaccount.php) */ .db-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; border-radius: 26px; overflow: hidden; background: var(--dx-grad-dark); color: #fff; box-shadow: var(--dx-shadow-lg); position: relative; } .db-top:before { content: ''; position: absolute; width: 320px; height: 320px; right: 18%; top: -170px; background: #7c3aed; filter: blur(80px); opacity: .7; } .db-top:after { content: ''; position: absolute; width: 260px; height: 260px; left: -80px; bottom: -150px; background: #00c2ff; filter: blur(80px); opacity: .35; } .db-hello, .db-bal { position: relative; z-index: 1; padding: 30px; } .db-eyebrow { display: inline-flex; gap: 7px; align-items: center; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); } .db-hello h1 { color: #fff !important; font-size: 26px; font-weight: 800; margin: 14px 0 6px; line-height: 1.25; } .db-hello p { margin: 0; color: rgba(255,255,255,.78); } .db-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .db-btn-white { background: #fff; color: #5b21b6 !important; box-shadow: 0 14px 26px -12px rgba(0,0,0,.5); min-height: 46px; } .db-btn-glass { background: rgba(255,255,255,.12); color: #fff !important; border: 1px solid rgba(255,255,255,.28); min-height: 46px; } .db-btn-white:hover, .db-btn-glass:hover { transform: translateY(-2px); } .db-bal { background: rgba(255,255,255,.07); border-left: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; } .db-bal-l { font-size: 13px; color: rgba(255,255,255,.7); font-weight: 600; } .db-bal-v { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 8px; word-break: break-word; background: linear-gradient(135deg, #fff, #c4b5fd 60%, #67e8f9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .db-bal a { color: #c4b5fd !important; font-weight: 700; font-size: 14px; } .db-sec { position: absolute; right: 22px; top: 20px; width: 74px; height: 74px; text-align: center; } .db-sec svg { width: 74px; height: 74px; transform: rotate(-90deg); } .db-sec path { fill: none; stroke-width: 3.2; stroke-linecap: round; } .db-sec .bg { stroke: rgba(255,255,255,.15); } .db-sec .fg { stroke: #34d399; } .db-sec b { position: absolute; left: 0; right: 0; top: 24px; font-size: 15px; } .db-sec small { position: absolute; left: 0; right: 0; top: 43px; font-size: 9.5px; opacity: .7; } .db-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .db-stat { background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 20px; padding: 18px; box-shadow: var(--dx-shadow); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--dx-text); transition: transform .2s, border-color .2s; } .db-stat:hover { transform: translateY(-3px); border-color: var(--dx-brand-line); color: var(--dx-text); } .db-stat .ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; margin-bottom: 8px; } .db-stat .ic.a { background: var(--dx-grad); } .db-stat .ic.b { background: linear-gradient(135deg, #ec4899, #f97316); } .db-stat .ic.c { background: linear-gradient(135deg, #10b981, #06b6d4); } .db-stat .ic.d { background: linear-gradient(135deg, #3b82f6, #6366f1); } .db-stat b { font-size: 24px; font-weight: 800; line-height: 1.1; } .db-stat small { color: var(--dx-muted); font-size: 13px; font-weight: 600; } .pf-card-h .db-all { margin-left: auto; font-weight: 700; font-size: 13.5px; white-space: nowrap; } .db-orders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .db-order { border: 1px solid var(--dx-line); border-radius: 18px; padding: 16px; background: var(--dx-bg); } .db-order-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .db-ref { font-weight: 800; font-size: 14px; } .db-date { color: var(--dx-muted); font-size: 12.5px; flex: 1; min-width: 80px; } .db-pill { padding: 3px 11px; border-radius: 99px; font-size: 12px; font-weight: 800; border: 1px solid transparent; } .db-pill.ok { background: var(--dx-ok-soft); color: #0a6b4d; border-color: rgba(18,184,134,.35); } .db-pill.wait { background: var(--dx-warn-soft); color: #8a5a00; border-color: rgba(245,159,0,.4); } .db-pill.bad { background: var(--dx-bad-soft); color: #b02424; border-color: rgba(240,62,62,.3); } .db-pill.mute { background: var(--dx-brand-soft); color: var(--dx-brand-2); border-color: var(--dx-brand-line); } .db-flow { display: flex; align-items: center; gap: 10px; } .db-side { flex: 1; min-width: 0; background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 14px; padding: 10px 12px; } .db-side small { display: block; color: var(--dx-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .db-side div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; } .db-side em { font-style: normal; color: var(--dx-muted); font-size: 12.5px; font-weight: 700; } .db-side img { border-radius: 50%; } .db-arrow { color: var(--dx-brand); font-size: 18px; } .db-pay { margin-top: 12px; min-height: 42px; width: 100%; } .db-empty { text-align: center; padding: 34px 10px; color: var(--dx-muted); } .db-empty > i { font-size: 44px; color: var(--dx-brand-line); } .db-empty p { margin: 10px 0 18px; } .db-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .db-step { position: relative; border: 1.5px solid var(--dx-line); border-radius: 18px; padding: 16px 12px 14px; text-align: center; background: var(--dx-bg); display: flex; flex-direction: column; align-items: center; gap: 2px; } .db-step .si { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--dx-brand-soft); color: var(--dx-brand); font-size: 18px; margin-bottom: 6px; } .db-step b { font-size: 14px; } .db-step small { color: var(--dx-muted); font-size: 12px; font-weight: 600; } .db-step .st { position: absolute; right: 10px; top: 10px; font-size: 18px; } .db-step.ok { border-color: rgba(18,184,134,.5); } .db-step.ok .st { color: var(--dx-ok); } .db-step.ok .si { background: var(--dx-ok-soft); color: var(--dx-ok); } .db-step.wait { border-color: rgba(245,159,0,.5); } .db-step.wait .st { color: var(--dx-warn); } .db-step.wait .si { background: var(--dx-warn-soft); color: var(--dx-warn); } .db-step.no .st { color: var(--dx-bad); } .db-p { margin: 0 0 16px; color: var(--dx-muted); } .db-p b { color: var(--dx-text); } .db-inline { display: flex; gap: 10px; } .db-inline .pf-in { flex: 1; min-width: 0; } .db-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--dx-brand-line); border-radius: 18px; padding: 26px 14px; margin: 0 0 16px; text-align: center; color: var(--dx-brand-2); background: var(--dx-brand-soft); cursor: pointer; font-weight: 700; word-break: break-all; } .db-file i { font-size: 30px; } .db-file input { position: absolute; opacity: 0; width: 1px; height: 1px; } .db-tips { padding: 0; } .db-tips summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .db-tips summary::-webkit-details-marker { display: none; } .db-tips summary i:first-child { color: var(--dx-brand); } .db-tips summary i:last-child { margin-left: auto; } .db-tips ul { margin: 0; padding: 0 22px 20px 40px; color: var(--dx-muted); line-height: 1.9; } /* old top menu on the pages not yet moved to the new layout (balance, withdraw, invite, reviews) */ #acc_user_menu { border-radius: 20px; padding: 8px; } #acc_user_menu ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #acc_user_menu ul::-webkit-scrollbar { display: none; } #acc_user_menu ul li { flex: 0 0 auto; } #acc_user_menu ul li.divider { display: none; } #acc_user_menu ul li a { white-space: nowrap; border-radius: 12px; } #acc_user_menu ul li a i { color: var(--dx-brand); margin-right: 6px; } html[data-theme="dark"] .db-pill.ok { color: #6ee7b7; } html[data-theme="dark"] .db-pill.wait { color: #fcd34d; } html[data-theme="dark"] .db-pill.bad { color: #fda4af; } html[data-theme="dark"] .db-order, html[data-theme="dark"] .db-step { background: #100e28; } html[data-theme="dark"] .db-side { background: var(--dx-surface); } @media (max-width: 991px) { .db-top { grid-template-columns: minmax(0, 1fr); } .db-bal { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } .db-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .db-top { border-radius: 22px; } .db-hello, .db-bal { padding: 22px 18px; } .db-hello h1 { font-size: 22px; } .db-bal-v { font-size: 30px; } .db-sec { top: 16px; right: 16px; width: 62px; height: 62px; } .db-sec svg { width: 62px; height: 62px; } .db-sec b { top: 19px; font-size: 13px; } .db-sec small { top: 36px; font-size: 8.5px; } .db-cta .pf-btn { flex: 1; width: auto; } .db-orders { grid-template-columns: minmax(0, 1fr); } .db-inline { flex-direction: column; } .db-inline .pf-btn { width: 100%; } .pf-card-h { flex-wrap: wrap; } } /* v15 — account layout: no sideways overflow on phones + profile picture */ .pf { max-width: 100%; overflow-x: clip; } .pf-grid > *, .pf-side > *, .pf-main > * { min-width: 0; } .pf-side, .pf-main { min-width: 0; max-width: 100%; } .pf-side { grid-template-columns: minmax(0, 1fr); } .pf-nav { min-width: 0; max-width: 100%; overflow: hidden; } .pf-hero { max-width: 100%; } .pf-hero-bg { height: 120px; } .pf-avatar { width: 108px; height: 108px; margin: -54px auto 0; padding: 0; overflow: hidden; background: var(--dx-surface); border: 5px solid var(--dx-surface); box-shadow: 0 16px 30px -12px rgba(124,58,237,.6), 0 0 0 3px rgba(124,58,237,.35); } .pf-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .pf-name { margin-top: 14px; } .db-cta .pf-btn { white-space: nowrap; padding: 0 16px; } @media (max-width: 640px) { .pf-hero-bg { height: 96px; } .pf-avatar { width: 96px; height: 96px; margin-top: -48px; } } /* ===== Language switch (BN | EN) ===== */ .dx-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); margin-right: 10px; vertical-align: middle; } .dx-lang i { color: var(--dx-cyan); margin: 0 4px 0 7px; font-size: 13px; } .dx-lang a { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; color: #dfe4ff !important; background: transparent; text-decoration: none !important; } .dx-lang a:hover { background: rgba(255,255,255,.14); } .dx-lang a.on { background: linear-gradient(135deg, #7c3aed, #06b6d4); color: #fff !important; box-shadow: 0 2px 8px rgba(124,58,237,.45); } .dx-lang-drawer { display: flex; justify-content: center; margin: 0 0 10px; background: var(--dx-brand-soft); border-color: var(--dx-brand-line); } .dx-lang-drawer i { color: var(--dx-brand); } .dx-lang-drawer a { color: var(--dx-brand-2) !important; } .dx-lang-drawer a.on { color: #fff !important; } html[data-theme="dark"] .dx-lang-drawer { background: rgba(124,58,237,.18); border-color: rgba(167,139,250,.3); } html[data-theme="dark"] .dx-lang-drawer a { color: #d9ccff !important; } html[data-theme="dark"] .dx-lang-drawer a.on { color: #fff !important; } @media (max-width: 575px) { .dx-top .dx-lang { margin-right: 0; } .dx-top .dx-lang i { display: none; } }