[data-testid="withdraw-form"] {
  display: flex !important;
  flex-direction: column;
  gap: 1rem;
}

[data-testid="withdraw-form"] > * + * {
  margin-top: 0 !important;
}

[data-testid="withdraw-submit-blocked-notice"] {
  order: 0;
}

[data-testid="withdraw-country"] {
  order: 1;
}

[data-testid="withdraw-methods"] {
  order: 2;
}

[data-testid="withdraw-amount"] {
  order: 3;
}

[data-tf-wd-amount-presets] {
  order: 4;
}

[data-testid="withdraw-method-fields"] {
  order: 5;
}

[data-testid="withdraw-submit"] {
  order: 6;
}

[data-testid="dashboard-withdraw-activity"],
[data-testid="withdraw-page-activity"],
[data-testid="withdraw-activity-feed"],
[data-feature="withdraw-activity-feed"],
[data-testid="withdraw-submit-blocked-notice"] {
  display: none !important;
}

#withdraw-amount.tf-wd-usd-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.tf-wd-local-wrap {
  position: relative;
}

.tf-wd-local-hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #94a3b8;
}

#tf-wd-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

#tf-wd-modal[hidden] {
  display: none !important;
}

#tf-wd-modal .tf-wd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 16, 0.72);
}

#tf-wd-modal .tf-wd-card {
  position: relative;
  width: min(32rem, 100%);
  max-height: min(88vh, 40rem);
  overflow: auto;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0b1726;
  color: #e2e8f0;
  padding: 1.5rem 1.4rem 1.25rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  font-family: Figtree, system-ui, sans-serif;
}

#tf-wd-modal .tf-wd-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #64748b;
}

#tf-wd-modal h2 {
  margin: 0.35rem 0 0;
  font-family: Unbounded, Figtree, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
}

#tf-wd-modal .tf-wd-lead,
#tf-wd-modal .tf-wd-kyc,
#tf-wd-modal .tf-wd-row-detail {
  margin: 0.65rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #94a3b8;
}

#tf-wd-modal .tf-wd-kyc {
  color: #99f6e4;
}

#tf-wd-modal .tf-wd-row {
  margin-top: 0.85rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  padding: 0.9rem 1rem;
}

#tf-wd-modal .tf-wd-row.is-ok {
  border-color: rgba(94, 234, 212, 0.28);
}

#tf-wd-modal .tf-wd-row.is-gap {
  border-color: rgba(251, 191, 36, 0.28);
}

#tf-wd-modal .tf-wd-row-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
}

#tf-wd-modal .tf-wd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

#tf-wd-modal .tf-wd-link,
#tf-wd-modal .tf-wd-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

#tf-wd-modal .tf-wd-link {
  border: 1px solid rgba(94, 234, 212, 0.35);
  background: rgba(45, 212, 191, 0.12);
  color: #ccfbf1;
}

#tf-wd-modal .tf-wd-close {
  margin-top: 1rem;
  width: 100%;
  border: 0;
  background: #2dd4bf;
  color: #042f2e;
  padding: 0.75rem 1rem;
}

#tf-wd-modal .tf-wd-close:hover,
#tf-wd-modal .tf-wd-link:hover {
  filter: brightness(1.08);
}

#tf-saved-note {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%) translateY(12px);
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #042f2e;
  color: #ccfbf1;
  border: 1px solid rgba(45, 212, 191, 0.45);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#tf-saved-note.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tf-locale-save-wrap {
  margin-top: 0.85rem;
}

#tf-locale-save {
  width: 100%;
}

button[data-testid="support-request-live"],
button[data-testid="support-page-request-live"] {
  display: none !important;
  width: auto !important;
  max-width: max-content !important;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.625rem !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  border-radius: 0.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  color: rgb(148, 163, 184) !important;
  box-shadow: none !important;
}

button[data-testid="support-request-live"]:hover,
button[data-testid="support-page-request-live"]:hover {
  border-color: rgba(94, 234, 212, 0.3) !important;
  color: rgb(153, 246, 228) !important;
  background: transparent !important;
}

div:has(> button[data-testid="support-request-live"]),
div:has(> button[data-testid="support-page-request-live"]) {
  padding: 0.35rem 0.75rem !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
}

.tf-admin-copy {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgb(148, 163, 184);
  cursor: pointer;
}

.tf-admin-copy:hover {
  border-color: rgba(94, 234, 212, 0.3);
  color: rgb(153, 246, 228);
}

.tf-admin-en {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #99f6e4;
}

.tf-admin-msg-tools {
  margin-top: 0.4rem;
}

.tf-admin-copy-email {
  margin-left: 0.5rem;
  vertical-align: middle;
}

.tf-agent-has-tr {
  position: relative;
}

.tf-agent-has-tr > *:not(.tf-agent-view):not(img):not(a):not([data-testid="support-msg-photo"]) {
  display: none !important;
}

.tf-agent-orig-hide {
  display: none !important;
}

.tf-agent-view {
  position: relative;
  z-index: 1;
  margin: 0;
}

.tf-agent-view .tf-agent-tr {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.75rem;
  background: #0b1f33;
  color: #f8fafc;
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tf-agent-orig-btn {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: #5eead4;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.8;
}

.tf-agent-orig-btn:hover {
  opacity: 1;
  text-decoration: underline;
}

.tf-agent-orig-wrap {
  margin-top: 0.4rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.7rem;
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.tf-agent-orig-text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #e2e8f0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tf-agent-i18n {
  display: none !important;
}

.tf-wd-addr-sensor {
  margin-top: 0.45rem;
  padding: 0.55rem 0.7rem 0.6rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
}

.tf-wd-addr-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #64748b;
}

.tf-wd-addr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tf-wd-addr-chips span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #94a3b8;
}

.tf-wd-addr-chips span.on {
  color: #ecfeff;
  border-color: rgba(45, 212, 191, 0.55);
  background: rgba(13, 148, 136, 0.28);
}

.tf-wd-addr-msg {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #94a3b8;
}

.tf-wd-addr-sensor[data-state="ok"] {
  border-color: rgba(45, 212, 191, 0.45);
}

.tf-wd-addr-sensor[data-state="ok"] .tf-wd-addr-msg {
  color: #5eead4;
}

.tf-wd-addr-sensor[data-state="warn"] {
  border-color: rgba(251, 191, 36, 0.45);
}

.tf-wd-addr-sensor[data-state="warn"] .tf-wd-addr-msg {
  color: #fbbf24;
}

.tf-wd-addr-sensor[data-state="bad"] {
  border-color: rgba(251, 113, 133, 0.5);
}

.tf-wd-addr-sensor[data-state="bad"] .tf-wd-addr-msg {
  color: #fda4af;
}

/* Keep withdraw copy airy and translucent while leaving controls readable.
   This must target the caption/helper spans, NOT the <label> itself: the label
   wraps the country / crypto picker, so dimming it multiplied the trigger and
   its open panel and made those dropdowns look see-through. */
[data-testid="withdraw-form"] label > span,
[data-testid="withdraw-form"] p,
.tf-wd-local-hint,
#tf-wd-modal .tf-wd-kicker,
#tf-wd-modal .tf-wd-lead,
#tf-wd-modal .tf-wd-kyc,
#tf-wd-modal .tf-wd-row-detail,
.tf-wd-addr-kicker,
.tf-wd-addr-msg {
  opacity: 0.62;
}
/* Solid withdrawal surfaces.

   Measured with headless Chrome on the live, signed-in /withdraw page
   (computed background-color of every painted element). Every surface the
   member reads inside the withdrawal form was painting at partial alpha, so the
   page behind it showed through:

     form card          bg-[#0b1726]/80   -> 20% see-through
     method tiles       bg-black/20       -> 20% see-through
     selected tile      bg-teal-300/10    -> 90% see-through
     crypto detail box  bg-black/20       -> 20% see-through
     amount chips       bg-black/20       -> 20% see-through
     inputs + closed pickers  .field      -> rgba(2,8,16,0.55)
     open picker panel  bg-[#0b1726]      + search bg-black/30
     address helper     rgba(15,23,42,0.72)

   Each rule below puts one of those onto an opaque fill. Everything is scoped
   to [data-testid="withdraw-form"] so the same shared components elsewhere
   (profile, admin, locale, other pages) keep their existing look. */

/* The form card itself. */
[data-testid="withdraw-form"] {
  background-color: #0b1726 !important;
}

/* Every control on `.field`: the amount input, payout address / note inputs,
   and the closed picker controls (country + crypto network) which are
   `button.field`. */
[data-testid="withdraw-form"] .field {
  background-color: #070f1a !important;
}

/* Method chooser tiles: Cryptocurrency, Binance, Skrill, PayPal, M-Pesa,
   Kenyan bank transfer. */
[data-testid="withdraw-form"] button[data-testid^="withdraw-method-"] {
  background-color: #070f1a !important;
}

/* The selected tile stays visibly selected (teal tint), but opaque. */
[data-testid="withdraw-form"] button[data-testid^="withdraw-method-"][class*="border-teal-300"] {
  background-color: #132c37 !important;
}

/* The payout detail panel revealed under the tiles (crypto network, PayPal
   email, etc.). */
[data-testid="withdraw-form"] [data-testid="withdraw-method-fields"] {
  background-color: #070f1a !important;
}

/* Amount preset chips ($500, $1000, ...). */
[data-testid="withdraw-form"] [class*="bg-black/20"] {
  background-color: #070f1a !important;
}

/* The address helper inside the crypto detail panel. */
[data-testid="withdraw-form"] .tf-wd-addr-sensor {
  background-color: #0f172a !important;
}

/* The open dropdown panel and its search box. */
[data-testid="withdraw-form"] [role="listbox"] {
  background-color: #0b1726 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

[data-testid="withdraw-form"] [role="listbox"] input[type="search"] {
  background-color: #040b14 !important;
}

[data-testid="withdraw-form"] [role="listbox"] button[role="option"]:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
/* Solid dropdowns and form fields, site-wide.

   The withdrawal form's own pickers (country, crypto network) were put onto
   opaque fills by the shard above, and the live /withdraw page now measures
   fully opaque. The catch is that the *same* shared dropdown component is used
   on other pages, and there it still paints at partial alpha, so the page
   behind shows through.

   Measured on the live, signed-in site with headless Chrome (computed
   background-color of every painted element, alpha via a 1x1 canvas probe):

     /  (landing)   button.field closed picker   rgba(2,8,16,0.55)  -> 55% see-through
                    listbox search box           oklab(0 0 0 / .3)  -> 30%
                    listbox active option        oklab(.855 ... / .15) -> 15%
     /profile       button.field pickers (x3)    rgba(2,8,16,0.55)
                    input.field text fields      rgba(2,8,16,0.55)
                    listbox search box           oklab(0 0 0 / .3)

   The open panels themselves already measure solid (rgb(11,23,38) a1) on every
   page, so only the closed trigger, the search row and the option highlight
   need work. These rules are deliberately global because the component is
   shared; the fill values match the ones already proven on /withdraw. */

/* Every `.field` control: text inputs and the closed picker triggers
   (country, crypto network, language, ...) which are `button.field`. */
.field {
  background-color: #070f1a !important;
}

/* Open dropdown panels — force a solid fill so a translucent panel can never
   be the container. */
[role="listbox"],
[role="menu"] {
  background-color: #0b1726 !important;
}

/* The search box inside an open dropdown panel. */
[role="listbox"] input[type="search"],
[role="menu"] input[type="search"] {
  background-color: #040b14 !important;
}

/* Highlighted / selected option rows: the same teal tint as before, but on an
   opaque fill (teal-300 at 15% composited over #0b1726 = #173740). */
[role="listbox"] button[role="option"][class*="bg-teal-300/15"],
[role="menu"] button[role="option"][class*="bg-teal-300/15"] {
  background-color: #173740 !important;
}

/* Option hover: white at 5% composited over #0b1726 = #172331. */
[role="listbox"] button[role="option"]:hover,
[role="menu"] button[role="option"]:hover {
  background-color: #172331 !important;
}