:root {
  color-scheme: dark;
  --bg: #121315;
  --side: #1d2023;
  --card: #1d2023;
  --line: #30343a;
  --muted: #929aa5;
  --blue: #174cff;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: #f5f7fa;
  font:
    15px/1.45 Inter,
    "Segoe UI",
    sans-serif;
}
.side {
  position: fixed;
  inset: 0 auto 0 0;
  width: 245px;
  background: var(--side);
  border-right: 1px solid #292c31;
  padding: 24px 15px;
  display: flex;
  flex-direction: column;
}
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  padding: 0 10px 28px;
}
.logo img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.side nav {
  display: grid;
  gap: 7px;
}
.side nav a {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 11px;
  color: #aab2bd;
  text-decoration: none;
}
.side nav a:hover,
.side nav .active {
  background: #141619;
  color: #fff;
}
.side nav i {
  font-size: 17px;
}
.side > small {
  margin-top: auto;
  color: #727b86;
  padding: 12px;
}
main {
  margin-left: 245px;
  padding: 30px;
  max-width: 1500px;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 26px;
  border-bottom: 1px solid #292d32;
}
h1 {
  margin: 7px 0 2px;
  font-size: 30px;
}
h2 {
  margin: 0 0 18px;
}
p {
  color: var(--muted);
  margin: 5px 0;
}
.crumb {
  color: #788391;
}
.balance {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  background: #191b1e;
  border-radius: 14px;
  padding: 12px 18px;
}
.balance i {
  color: #2863ff;
  font-size: 25px;
}
.balance small,
.balance b {
  display: block;
}
.balance small {
  color: var(--muted);
  font-size: 9px;
}
.bonus-balances {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  border: 1px solid #33415f;
  background: #171c28;
  border-radius: 14px;
  padding: 11px 14px;
  min-width: 220px;
}
.bonus-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bonus-heading i {
  color: #f2b84b;
  font-size: 20px;
}
.bonus-heading small,
.bonus-heading b {
  display: block;
}
.bonus-heading small {
  color: var(--muted);
  font-size: 9px;
}
.bonus-heading b {
  color: #f5f7fb;
  font-size: 12px;
}
.bonus-items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.bonus-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #3a4968;
  border-radius: 8px;
  padding: 6px 8px;
  color: #dfe7f5;
  font-size: 11px;
}
.bonus-item strong {
  color: #f2b84b;
}
.bonus-empty {
  color: var(--muted);
  font-size: 11px;
}
.grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  margin: 22px 0;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}
label {
  display: grid;
  gap: 7px;
  color: #aeb5bf;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
input {
  border: 1px solid #3a3f46;
  border-radius: 10px;
  background: #141619;
  color: #fff;
  padding: 13px;
  font: inherit;
}
.total {
  display: flex;
  justify-content: space-between;
  padding: 17px 0;
  font-size: 18px;
}
.methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.methods button,
.section-title button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #16181b;
  color: #aeb5bf;
  padding: 12px;
  cursor: pointer;
}
.methods .selected {
  border-color: #2457ff;
  background: #17213c;
  color: #fff;
}
.instructions {
  margin: 14px 0;
  background: #15171a;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px;
}
.instructions small {
  color: #7f8893;
}
.instructions strong {
  display: block;
  font-size: 18px;
  margin-top: 5px;
}
.instructions button {
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.upload {
  margin: 14px 0;
}
.upload input {
  display: none;
}
.upload span {
  border: 1px dashed #4a515b;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
}
.primary {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 14px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.primary:disabled {
  opacity: 0.5;
}
.rates {
  display: grid;
  gap: 9px;
}
.rate {
  display: flex;
  justify-content: space-between;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.service-price-card,
.service-price-card .rate { border-radius: 0 !important; }
.service-price-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.service-price-heading h2 { margin: 0; }
.service-price-heading p { margin: 6px 0 0; color: #7f8b9c; font-size: 12px; }
.service-price-heading > span { display: flex; align-items: center; gap: 7px; color: #8290a2; font: 800 9px "JetBrains Mono",monospace; letter-spacing: .1em; white-space: nowrap; }
.service-price-heading > span i { width: 7px; height: 7px; border-radius: 50%; background: #43c98d; box-shadow: 0 0 8px rgba(67,201,141,.55); }
.service-rate { align-items: center; gap: 18px; padding: 15px 16px; }
.service-rate > span { color: #dce3ed; font-weight: 650; }
.service-rate > b { display: grid; justify-items: end; gap: 6px; color: #fff; text-align: right; }
.service-rate > b small { color: #8592a4; font-size: 10px; font-weight: 550; line-height: 1.45; }
@media(max-width:620px){.service-price-heading{display:grid}.service-price-heading>span{justify-self:start}.service-rate{align-items:flex-start;flex-direction:column}.service-rate>b{justify-items:start;text-align:left}.service-rate>b small{overflow-wrap:anywhere}}
.muted {
  font-size: 12px;
}
.section-title {
  display: flex;
  justify-content: space-between;
}
.table {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  text-align: left;
  border-top: 1px solid var(--line);
  padding: 13px;
}
th {
  font-size: 10px;
  color: #87909b;
}
.status {
  padding: 5px 9px;
  border-radius: 999px;
  background: #282d34;
}
.approved {
  color: #6ee7a5;
}
.pending {
  color: #f5c86b;
}
.rejected {
  color: #ff7e87;
}
@media (max-width: 850px) {
  .side {
    position: static;
    width: auto;
  }
  .side nav {
    grid-template-columns: repeat(2, 1fr);
  }
  main {
    margin: 0;
    padding: 18px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  header {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
  .balance {
    padding: 10px;
  }
  .balance-stack {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .side > small {
    display: none;
  }
}
.balance-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 520px);
  flex: 0 1 520px;
}
.balance.pending {
  border-color: #5e4b24;
  background: #211d14;
}
.checkout-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.checkout-brand img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
}
.checkout-brand h2 {
  margin: 3px 0 0;
}
.checkout-brand small {
  letter-spacing: 0.12em;
  color: #8290a5;
}
.funding-step,
.checkout-choice,
.checkout-review {
  position: relative;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid #2c3543;
  border-radius: 16px;
  background: #10161f;
}
.funding-step,
.checkout-choice { padding-left: 76px; }
.funding-step-number {
  position: absolute;
  top: 24px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #4269e8;
  border-radius: 50%;
  background: #17254a;
  color: #a9bdff;
  font: 800 12px/1 "JetBrains Mono", monospace;
}
.funding-step-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.funding-step-heading small,
.checkout-review small {
  color: #7998ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.funding-step-heading h3 { margin: 6px 0 0; font-size: 20px; }
.funding-step-heading > span {
  padding: 7px 10px;
  border: 1px solid #344158;
  border-radius: 999px;
  color: #aebbd0;
  font-size: 10px;
  font-weight: 800;
}
.wallet-amount-field {
  display: flex;
  align-items: center;
  margin-top: 20px;
  overflow: hidden;
  border: 2px solid #4776ff;
  border-radius: 14px;
  background: #0b1119;
  box-shadow: 0 0 0 4px rgba(71,118,255,.1);
}
.wallet-amount-field > span {
  padding-left: 20px;
  color: #8eabff;
  font-size: 28px;
  font-weight: 700;
}
.wallet-amount-field input {
  width: 100%;
  min-height: 72px;
  padding: 0 20px 0 10px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 32px;
  font-weight: 750;
  outline: 0;
}
.wallet-amount-field:has(input.invalid) {
  border-color: #d45868;
  box-shadow: 0 0 0 4px rgba(212,88,104,.1);
}
.quick-amounts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.quick-amounts button {
  min-width: 68px;
  padding: 10px 14px;
  border: 1px solid #344054;
  border-radius: 9px;
  background: #151d29;
  color: #c8d2e2;
  font-weight: 750;
  cursor: pointer;
}
.quick-amounts button:hover { border-color: #567cff; color: #fff; }
.minimum-deposit { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: #8794a6; font-size: 12px; }
.minimum-deposit b { color: #dce5f3; }
.checkout-choice .payment-heading { margin: 0; }
.checkout-review {
  border-color: #3d5791;
  background: linear-gradient(135deg,#16213a,#111823);
}
.checkout-review-head { display: flex; align-items: center; gap: 13px; }
.checkout-review-head > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3765f1;
  color: #fff;
  font-weight: 900;
}
.checkout-review-head div { display: grid; gap: 4px; }
.checkout-review-head b { font-size: 15px; }
.checkout-review-values {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #35445f;
  border-radius: 12px;
  background: rgba(7,12,20,.55);
}
.checkout-review-values div { display: grid; gap: 7px; }
.checkout-review-values strong { color: #fff; font-size: 24px; }
.checkout-review-values i { color: #6e8ff5; }
.checkout-review > p { margin: 13px 0 0; color: #8290a4; font-size: 11px; }
.buy,
.buy .funding-step,
.buy .checkout-choice,
.buy .checkout-review,
.buy .wallet-amount-field,
.buy .quick-amounts button,
.buy .checkout-methods button,
.buy .checkout-methods button > i:first-child,
.buy .payment-mode,
.buy .payment-mode > i:first-child,
.buy .payment-support,
.buy .payment-support > i:first-child,
.buy .total,
.buy .methods button,
.buy .instructions,
.buy .upload,
.buy .primary,
.buy .secondary,
.buy .crypto-choice,
.buy .crypto-gateway,
.buy select,
.buy input,
.buy textarea,
.buy .gateway-bank-transfer,
.buy .copy-transfer-account,
.buy .verify-transfer {
  border-radius: 0 !important;
}
#gatewayCheckout {
  margin-top: 18px;
}
#gatewayCheckout select {
  width: 100%;
  margin-top: 8px;
}
.primary .bi-arrow-repeat {
  display: inline-block;
  animation: wallet-spin 0.8s linear infinite;
}
@keyframes wallet-spin {
  to {
    transform: rotate(360deg);
  }
}
.crypto-choice {
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #354053;
  border-radius: 10px;
  background: transparent;
  color: #dbe5f5;
}
.gateway-crypto [data-method="bank"] {
  display: none;
}
.crypto-only > label,
.crypto-only > .total,
.crypto-only > .muted,
.crypto-only > #flutterwavePay {
  display: none;
}
.payment-heading {
  margin: 20px 0 12px;
}
.payment-heading small {
  color: #5e83ff;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.payment-heading h3 {
  margin: 5px 0;
  font-size: 1.15rem;
}
.payment-heading p {
  margin: 0;
  color: #8d99aa;
}
.payment-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.checkout-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 22px;
}
.payment-currency-step { margin-top: 18px; }
.currency-select-field {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: #9eabc0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}
.currency-select-field select { margin-top: 0; }
.currency-support-text {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 12px 0 0;
  padding: 11px 13px;
  border-left: 3px solid #4f7cff;
  background: #101823;
  color: #aab6c8;
  font-size: 13px;
}
.checkout-methods button[hidden] { display: none !important; }
.checkout-method-heading { margin-top: 0; }
.checkout-methods button.selected .check { display: block; color: #6f92ff; }

.checkout-methods button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 13px 14px;
  border: 1px solid #2d3748;
  background: #111821;
  color: #dbe5f5;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.checkout-methods button > i:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  background: transparent;
  color: #7ca0ff;
  font-size: 20px;
}
.checkout-methods button span { display: grid; min-width: 0; gap: 3px; }
.checkout-methods button b,
.checkout-methods button small {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}
.checkout-methods button b { font-size: 14px; line-height: 1.2; }
.checkout-methods button small { color: #8794a6; font-size: 11px; line-height: 1.3; }
.checkout-methods button .check { display: none; }
.checkout-methods button:hover { border-color: #52647f; background: #151d28; }
.checkout-methods button.selected {
  border-color: #4f7cff;
  background: #172239;
  box-shadow: inset 0 -3px 0 #4f7cff;
}
.payment-support {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: -5px 0 23px;
  padding: 15px 17px;
  border: 1px solid rgba(37, 211, 102, 0.42);
  border-radius: 13px;
  background: linear-gradient(120deg, rgba(37, 211, 102, 0.15), rgba(16, 25, 31, 0.96));
  color: #effff5;
  text-decoration: none;
}
.payment-support[hidden] { display: none !important; }
.payment-support > i:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #25d366;
  color: #07180d;
  font-size: 21px;
}
.payment-support span { display: grid; flex: 1; gap: 3px; }
.payment-support b { font-size: 14px; }
.payment-support strong { color: #69ed9b; font-size: 12px; letter-spacing: .06em; }
.payment-support > i:last-child { color: #69ed9b; }
.payment-support:hover { border-color: #42e17c; transform: translateY(-1px); }
.legacy-payment-choice { display: none !important; }
.payment-mode {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 16px;
  border: 1px solid #2d3748;
  border-radius: 13px;
  background: #121923;
  color: #dbe5f5;
}
.payment-mode > i:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #1b2638;
  color: #7ca0ff;
  font-size: 1.1rem;
}
.payment-mode span {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}
.payment-mode span small {
  color: #8794a6;
}
.payment-mode .check {
  opacity: 0;
  color: #4674ff;
}
.payment-mode.selected {
  border-color: #4674ff;
  background: #151f33;
  box-shadow: 0 0 0 1px #4674ff inset;
}
.payment-mode.selected .check {
  opacity: 1;
}
#manualCrypto {
  display: none;
}
.show-crypto > label,
.show-crypto > .total,
.show-crypto > .muted,
.show-crypto > .payer-grid,
.show-crypto > .gateway-bank-transfer,
.show-crypto > #flutterwavePay {
  display: none;
}
.buy select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 54px;
  margin-top: 8px;
  padding: 0 48px 0 16px;
  border: 1px solid #354154;
  border-radius: 11px;
  background: #0e141d
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2395a4ba' stroke-width='2'%3E%3Cpath d='m2 5 5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 17px center;
  color: #f3f6fb;
  font: 600 15px/1 system-ui;
  cursor: pointer;
}
.buy select:focus {
  outline: 0;
  border-color: #4776ff;
  box-shadow: 0 0 0 3px rgba(71, 118, 255, 0.15);
}
@media (max-width: 1000px) {
  .checkout-methods { grid-template-columns: 1fr; }
  .payment-currency-step { margin-top: 18px; }
.currency-select-field {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: #9eabc0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}
.currency-select-field select { margin-top: 0; }
.currency-support-text {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 12px 0 0;
  padding: 11px 13px;
  border-left: 3px solid #4f7cff;
  background: #101823;
  color: #aab6c8;
  font-size: 13px;
}
.checkout-methods button[hidden] { display: none !important; }
.checkout-method-heading { margin-top: 0; }
.checkout-methods button.selected .check { display: block; color: #6f92ff; }

.checkout-methods button { min-height: 70px; }
}
@media (max-width: 620px) {
  .funding-step,.checkout-choice { padding: 68px 17px 20px; }
  .funding-step-number { top: 18px; left: 17px; }
  .funding-step-heading { display: grid; }
  .funding-step-heading > span { justify-self: start; }
  .wallet-amount-field input { min-height: 62px; font-size: 27px; }
  .checkout-review { padding: 20px 17px; }
  .checkout-review-values { grid-template-columns: 1fr; gap: 12px; }
  .checkout-review-values > i { transform: rotate(90deg); }
  .payment-modes {
    grid-template-columns: 1fr;
  }
  .payment-mode {
    padding: 13px;
  }
}
.crypto-gateway {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #29344a;
  border-radius: 12px;
  background: #101722;
}
.crypto-gateway select {
  width: 100%;
  margin-top: 8px;
}
.crypto-gateway .primary {
  margin-top: 12px;
}
.crypto-gateway .instructions {
  margin-top: 16px;
}
.crypto-gateway .instructions strong {
  font-size: 1.15rem;
  word-break: break-all;
}
.crypto-gateway .instructions button b {
  word-break: break-all;
}
.payment-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid #256f50;
  border-radius: 14px;
  background: #10241d;
  color: #d8f8e8;
}
.payment-notice[hidden] {
  display: none;
}
.payment-notice > i {
  font-size: 1.5rem;
  color: #52d99a;
}
.payment-notice h3 {
  margin: 0 0 5px;
}
.payment-notice p {
  margin: 0;
  color: #a8cfbd;
}
.payment-notice.processing {
  border-color: #685a25;
  background: #282311;
  color: #fff2bd;
}
.payment-notice.processing > i {
  color: #f1ca54;
}
.payment-notice.processing p {
  color: #d5c991;
}
.payment-notice.error {
  border-color: #773e48;
  background: #28151a;
}
.payment-notice.error > i {
  color: #ff788c;
}
.gateway-bank-transfer{margin-top:18px!important;display:grid;gap:12px}.gateway-bank-transfer[hidden]{display:none!important}.copy-transfer-account{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:54px!important;padding:0 16px!important;border:1px dashed #4c67a6!important;border-radius:9px!important;background:#111722!important;color:#fff!important;cursor:pointer}.copy-transfer-account b{font-size:21px;letter-spacing:.08em}.gateway-bank-transfer .primary{width:100%;margin-top:7px}.gateway-bank-transfer>small:last-of-type{line-height:1.55;color:#8792a5}
.payer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;padding-top:4px}.transfer-expiry{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid #2d3850;border-radius:10px;background:#111722}.transfer-expiry span{font-size:11px;font-weight:700;letter-spacing:.11em;color:#8f9bb0}.transfer-expiry b{font-size:22px;font-variant-numeric:tabular-nums;color:#fff}.verify-transfer{display:flex;align-items:center;gap:13px;width:100%;padding:15px 17px;border:1px solid #315ee8;border-radius:10px;background:#1f51ff;color:#fff;text-align:left;cursor:pointer}.verify-transfer>i{font-size:24px}.verify-transfer span{display:grid;gap:3px}.verify-transfer b{font-size:14px}.verify-transfer small{font-size:11px;color:#dbe4ff}.verify-transfer:disabled{cursor:not-allowed;opacity:.55}.verify-transfer:not(:disabled):hover{background:#315fff}@media(max-width:640px){.payer-grid{grid-template-columns:1fr;margin-top:20px}.gateway-bank-transfer{padding:16px!important}.copy-transfer-account b{font-size:18px}.transfer-expiry b{font-size:19px}}

/* Progressive wallet checkout */
.checkout-progress {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: 28px 0 8px;
  padding: 0 4px 22px;
  border-bottom: 1px solid #293343;
}
.checkout-progress > i { height: 1px; background: #344055; }
.checkout-progress button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #718096;
  cursor: default;
}
.checkout-progress button span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid #3b475a;
  background: #111821;
  font-size: 12px;
  font-weight: 800;
}
.checkout-progress button b { font-size: 12px; letter-spacing: .04em; }
.checkout-progress button.active { color: #f4f7fb; }
.checkout-progress button.active span { border-color: #4f7cff; background: #315de0; color: #fff; }
.checkout-progress button.complete { color: #a8b5c8; cursor: pointer; }
.checkout-progress button.complete span { border-color: #4f7cff; color: #7f9cff; }
.buy [data-flow-panel] { display: none; }
.buy[data-flow-step="1"] [data-flow-panel="1"],
.buy[data-flow-step="2"] [data-flow-panel="2"],
.buy[data-flow-step="3"] [data-flow-panel="3"] { display: block; }
.buy[data-flow-step="1"] .checkout-review,
.buy[data-flow-step="1"] .payment-support,
.buy[data-flow-step="1"] #gatewayCheckout,
.buy[data-flow-step="1"] #manualCheckout,
.buy[data-flow-step="2"] .checkout-review,
.buy[data-flow-step="2"] .payment-support,
.buy[data-flow-step="2"] #gatewayCheckout,
.buy[data-flow-step="2"] #manualCheckout { display: none !important; }
.buy .funding-step,
.buy .checkout-choice {
  margin: 0;
  padding: 28px 4px 6px;
  border: 0;
  background: transparent;
}
.buy .funding-step-number { display: none; }
.currency-state-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.currency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.currency-option {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid #303b4d;
  background: #111821;
  color: #e5ebf5;
  text-align: left;
  cursor: pointer;
}
.currency-option > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: #1a2433;
  color: #86a1ff;
  font-size: 14px;
  font-weight: 850;
}
.currency-option > b { display: grid; gap: 4px; font-size: 15px; }
.currency-option small { overflow: hidden; color: #8290a3; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.currency-option > i { opacity: 0; color: #6d8fff; }
.currency-option:hover { border-color: #53647f; background: #151e2a; }
.currency-option.selected { border-color: #4f7cff; background: #172137; box-shadow: inset 0 -3px 0 #4f7cff; }
.currency-option.selected > i { opacity: 1; }
.checkout-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #293343; }
.checkout-actions-end { justify-content: flex-end; }
.flow-primary,.flow-back {
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid #3a4659;
  background: transparent;
  color: #dce5f3;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
.flow-primary { border-color: #315fe5; background: #315fe5; color: #fff; }
.flow-primary:hover { background: #3e6cf0; }
.flow-back:hover { border-color: #64748b; }
.method-flow-back { margin-top: 18px; }
@media (max-width: 760px) {
  .checkout-progress { gap: 7px; }
  .checkout-progress button { gap: 5px; }
  .checkout-progress button b { display: none; }
  .currency-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .currency-option { grid-template-columns: 36px minmax(0,1fr) 16px; min-height: 68px; padding: 10px; }
  .currency-option > span { width: 36px; height: 36px; font-size: 12px; }
}
@media (max-width: 390px) {
  .currency-grid { grid-template-columns: 1fr; }
}