/*
 * Withdrawal network-fee estimate line (CASINO-FEATURE-BACKLOG EPIC 6: wallet). Synthwave design tokens
 * only (no hard-coded colors). Sits under the Request-withdrawal button; wraps cleanly at 360/390. The
 * "You receive" figure uses --win (the player gets the full amount), the fee note is muted/secondary.
 */

.wd-fee-estimate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1, 4px) var(--sp-2, 8px);
  margin: var(--sp-2, 8px) 0 0;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border: 1px solid var(--line, #2a2150);
  border-radius: var(--r-md, 10px);
  background: var(--surface-2, #15152b);
  font-size: var(--fs-sm, .875rem);
  line-height: 1.4;
}

.wd-fee-estimate[hidden] { display: none; }

.wd-fee-fig {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.wd-fee-label { color: var(--muted, #9aa3b8); }

.wd-fee-value {
  color: var(--fg, #e2e8f0);
  font-weight: var(--fw-med, 600);
  font-variant-numeric: tabular-nums;
}

/* The fee is informational + house-paid: keep it calm/secondary, never alarming. */
.wd-fee-value.is-house { color: var(--fg-dim, #c4cbdb); font-weight: var(--fw-reg, 500); }

/* What the player actually receives — the full amount — reads as a positive (neon teal). */
.wd-fee-value.is-receive {
  color: var(--win, #34f5c5);
  text-shadow: var(--neon-glow-text, none);
}

.wd-fee-sep { color: var(--faint, #6f7894); }

/* Stack the two figures on the narrowest phones so neither truncates. */
@media (max-width: 380px) {
  .wd-fee-sep { display: none; }
  .wd-fee-estimate { flex-direction: column; gap: var(--sp-1, 4px); }
}