/* Balance pill + Add Funds window. Same palette as accounts.css (DMarket's own colours). */
.bal-pill { display: flex; flex: none; align-items: center; gap: 4px; height: 40px; padding: 4px; border-radius: 10px; background: #171717; font-family: Montserrat, Arial, sans-serif; }
.bal-amount { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px; border: 0; border-radius: 7px; background: none; color: #e5e5e5; font-size: 14px; font-weight: 600; cursor: pointer; }
.bal-amount:hover { background: rgba(255, 255, 255, 0.05); }
.bal-amount svg { color: #a3a3a3; }
.bal-add { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 7px; background: rgba(255, 201, 80, 0.14); color: #ffc950; cursor: pointer; transition: background 0.15s; }
.bal-add:hover { background: rgba(255, 201, 80, 0.24); }

/* Balance dropdown */
.bal-menu { position: fixed; z-index: 85; width: 280px; padding: 14px; border: 1px solid #262626; border-radius: 12px; background: #171717; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); color: #e5e5e5; font-family: Montserrat, Arial, sans-serif; }
.bal-menu[hidden] { display: none; }
.bal-menu-head small { display: block; font-size: 12px; color: #8a8a8a; }
.bal-menu-head b { display: block; margin: 2px 0 12px; font-size: 24px; color: #fff; }
.bal-menu-title { margin: 16px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #6a6a6a; }
.bal-menu-empty { margin: 0; font-size: 12px; color: #6a6a6a; }
.bal-hist { margin: 0; padding: 0; list-style: none; }
.bal-hist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid #222; }
.bal-hist b { display: block; font-size: 12px; font-weight: 600; }
.bal-hist small { font-size: 11px; color: #6a6a6a; }
.bal-hist em { font-style: normal; font-size: 13px; font-weight: 700; white-space: nowrap; }
.bal-hist em.deposit { color: #ffc950; }

.bal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: #e5e5e5; font: 600 13px Montserrat, Arial, sans-serif; cursor: pointer; }
.bal-btn.primary { background: #ffc950; color: #0b0b0b; }
.bal-btn.primary:hover { background: #fbd684; }
.bal-btn.big { height: 48px; font-size: 15px; }
.bal-btn svg { width: 18px; height: 18px; }

/* ---------- Add Funds window ---------- */
.bal-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); }
.bal-overlay.open { display: flex; }
/* Small brand badges used by the homepage's "ways to pay" section. */
.bal-badge { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; font: 800 15px/1 Montserrat, Arial, sans-serif; }

.af-dialog { --af-line: #2a2f3b; display: flex; flex-direction: column; width: min(580px, 100%); max-height: calc(100vh - 48px); overflow: hidden; border: 1px solid #1f232d; border-radius: 16px; background: #11131a; color: #e8eaf0; font-family: Montserrat, Arial, sans-serif; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.af-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 6px 18px; }
.af-head h2 { margin: 0; font-size: 22px; font-weight: 600; color: #fff; }
.af-x { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #4a4f5c; border-radius: 9px; background: none; color: #fff; cursor: pointer; }
.af-x:hover { background: rgba(255, 255, 255, 0.06); }
.af-body { overflow-y: auto; padding: 18px 26px 22px; }
.af-label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 500; color: #f1f2f6; }
.af-need { margin: 0 0 14px; padding: 9px 12px; border: 1px solid rgba(255, 165, 61, 0.3); border-radius: 9px; background: rgba(255, 165, 61, 0.08); color: #ffb866; font-size: 13px; }
.af-need b { color: #fff; }

.af-stepper { display: flex; align-items: center; gap: 8px; height: 56px; padding: 5px; border: 1px solid var(--af-line); border-radius: 10px; }
.af-step { display: grid; place-items: center; width: 44px; height: 100%; flex: none; border: 1px solid #3a3f4c; border-radius: 7px; background: none; color: #fff; cursor: pointer; }
.af-step:hover { border-color: #5a6070; background: rgba(255, 255, 255, 0.04); }
.af-stepper input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 600 17px Montserrat, Arial, sans-serif; text-align: center; -moz-appearance: textfield; }
.af-stepper input::-webkit-outer-spin-button, .af-stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.af-stepper:focus-within { border-color: #ffc950; }

.af-methods { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.af-method { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100px; padding: 10px; overflow: hidden; border: 1px solid var(--af-line); border-radius: 12px; background: none; color: #cfd4dd; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.af-method:hover { border-color: #444a58; }
.af-method.soon { cursor: not-allowed; }
.af-method.soon > :not(.af-soon) { opacity: 0.35; filter: grayscale(1); }
.af-method.soon:hover { border-color: var(--af-line); }
.af-soon { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px 8px; border-radius: 999px; background: #2a2f3a; color: #c9cfdb; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.af-soon.af-maint { background: rgba(255, 201, 80, 0.16); color: #ffc950; }
.af-method.on { border-color: #ffc950; background: rgba(255, 201, 80, 0.06); box-shadow: 0 0 0 1px #ffc950 inset; }
.af-card, .af-crypto, .af-paysafe, .af-binance { grid-column: span 6; }
.af-art { position: absolute; top: 50%; height: 108%; transform: translateY(-50%); pointer-events: none; }
.af-card .af-art { left: 1%; height: 128%; }
.af-paysafe .af-art { left: 6%; height: 104%; }
.af-binance .af-art { left: 1%; height: 112%; }
.af-crypto .af-art { left: 3%; height: 124%; }
.af-logos { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.af-name { position: relative; z-index: 1; font-size: 16px; font-weight: 500; color: #d3d7df; }
.af-card .af-logos, .af-card .af-name { margin-left: 22%; }
.af-paysafe .af-logos, .af-paysafe .af-name { margin-left: 18%; }
.af-binance .af-logos { align-self: flex-start; margin-left: 38%; }
.af-binance .af-name { margin-left: 12%; }
.af-crypto .af-logos, .af-crypto .af-name { margin-left: 24%; }

/* Brand marks */
.af-visa { font: italic 900 17px/1 Arial, sans-serif; letter-spacing: -0.5px; color: #1a4fd0; background: linear-gradient(90deg, #1434cb, #1a5cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.af-mc { position: relative; display: inline-block; width: 26px; height: 16px; }
.af-mc i { position: absolute; top: 0; width: 16px; height: 16px; border-radius: 50%; }
.af-mc i:first-child { left: 0; background: #eb001b; }
.af-mc i:last-child { right: 0; background: #f79e1b; mix-blend-mode: screen; opacity: 0.95; }
.af-amex { display: grid; place-items: center; height: 20px; padding: 0 4px; border-radius: 2px; background: #1f72cd; color: #fff; font: 800 6px/1.05 Arial, sans-serif; text-align: center; letter-spacing: 0.2px; }
.af-psc { display: inline-flex; align-items: center; gap: 2px; font: 800 18px/1 Arial, sans-serif; color: #008ac9; }
.af-psc em { font-style: normal; font-weight: 300; color: #008ac9; }
.af-psc-lock { width: 11px; height: 13px; margin-right: 2px; border-radius: 2px 2px 3px 3px; background: #d6001c; box-shadow: 0 -4px 0 -2px #d6001c; }
.af-bnb { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f3ba2f; color: #fff; }
.af-coin { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font: 800 13px/1 Arial, sans-serif; }
.af-coin.btc { background: #f7931a; }
.af-coin.eth { background: #627eea; }
.af-coin.bch { background: #8dc351; }
.af-coin.ltc { background: #bfbbbb; }

.af-sum { display: flex; flex-direction: column; gap: 18px; margin: 16px 0 0; padding: 26px 18px; border: 1px solid var(--af-line); border-radius: 12px; }
.af-sum div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.af-sum dt { font-size: 16px; color: #e8eaf0; }
.af-sum dd { margin: 0; font-size: 16px; font-weight: 500; color: #fff; letter-spacing: 0.5px; text-align: right; }

.af-error { margin-top: 12px; padding: 9px 12px; border-radius: 9px; background: rgba(255, 90, 110, 0.1); color: #ff7a8a; font-size: 13px; }
.af-pay { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 44px; margin-top: 16px; border: 1px solid var(--af-line); border-radius: 10px; background: #0c0e13; color: #fff; font: 500 16px Montserrat, Arial, sans-serif; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.af-pay:not([aria-disabled]) { border-color: #ffc950; background: #ffc950; color: #0b0b0b; }
.af-pay:not([aria-disabled]):hover { background: #fbd684; }
.af-pay[aria-disabled] { opacity: 0.75; }
.af-terms { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #8b90a0; }
.af-terms a { color: #3b82f6; text-decoration: none; }
.af-terms a:hover { text-decoration: underline; }
.af-preview { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: #b58a52; }

.af-done { display: flex; flex-direction: column; align-items: center; padding-top: 28px; text-align: center; }
.af-done-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 201, 80, 0.14); color: #ffc950; }
.af-done h3 { margin: 16px 0 4px; font-size: 24px; color: #fff; }
.af-done p { margin: 0 0 8px; font-size: 14px; color: #8b90a0; }
.af-done b { color: #fff; }

@media (max-width: 767px) {
  .bal-pill { height: 34px; padding: 3px; }
  .bal-amount { height: 28px; padding: 0 4px 0 8px; font-size: 13px; }
  .bal-amount svg { display: none; }
  .bal-add { width: 28px; height: 28px; }
  .bal-overlay { align-items: flex-end; padding: 0; }
  .af-dialog { max-height: 94vh; border-radius: 16px 16px 0 0; }
  .af-body { padding: 14px 14px 24px; }
  .af-methods { gap: 8px; }
  .af-card, .af-paysafe, .af-binance, .af-crypto { grid-column: span 6; }
  .af-method { height: 92px; gap: 8px; }
  .af-method .af-logos, .af-method .af-name { align-self: center; margin-left: 0 !important; }
  .af-name { font-size: 13px; }
  .af-art { opacity: 0.7; }
  .af-visa { font-size: 14px; }
  .af-coin { width: 18px; height: 18px; font-size: 10px; }
  .af-logos { gap: 5px; }
  .af-sum { padding: 18px 14px; gap: 14px; }
  .af-sum dt, .af-sum dd { font-size: 14px; }
}
@media (max-width: 1099px) {
  .bal-tablet-hide { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .bal-amount svg { display: none; }
  .bal-amount { padding: 0 6px 0 8px; }
}

/* Header cleanup: hide Support, promo (fire), localization and Steam sign-up */
header button[aria-label="Support"],
header a[href="/sell-items-promo"],
header button[aria-label="Localization settings"],
header dm-vendor-auth-btn { display: none !important; }
/* Phones: a tighter pill so the header stays on one line. */
@media (max-width: 767px) {
  .bal-pill { gap: 2px; }
  .bal-amount { padding: 0 4px 0 6px; }
}