/* WITHDRAW (the Mithril Exchange): on top of site.css + wow-real.css (frames in the real tooltip
   border, UI-Panel and glue buttons, Friz/Morpheus). The transfer is the vanilla loading bar. */

body[data-page="withdraw"] .band { min-height: 56vh; }
.wd-band [hidden], .wd [hidden] { display: none !important; }
.wd-band > .art img { object-position: 50% 58%; }
.wd-band .band-in { padding-bottom: 34px; }
.wd-who { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 8px 14px 8px 8px; background: rgba(0,0,0,.6); border: 1px solid #000; box-shadow: inset 0 0 0 1px #3d3428; }
.wd-who .wd-k { display: block; font-size: 13px; color: var(--grey); }
.wd-addr { color: #fff; font-size: 17px; text-decoration: none; }
.wd-ico { width: 38px; height: 38px; flex: none; display: block; border: 1px solid #000; border-radius: 3px; box-shadow: 0 1px 3px #000; }
.wd-k { color: var(--gold); font-size: 13.5px; }
.wd-k small { color: var(--grey); font-size: 12.5px; }

.wd { margin-top: 44px; }
.wd-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.wd-side { display: grid; gap: 28px; }
.wd .frame-title { gap: 12px; align-items: center; }
.wd .frame-title > h2 { margin: 0; }
.wd .frame-title > .wd-live, .wd .frame-title > .wd-aside { font: 13px var(--f-ui); padding: 0; }
.wd .frame-title > .wd-aside { color: var(--muted); }
.wd-ex { padding: 8px 14px 12px; }

/* direction: two tabs */
.wd-tabs { display: flex; gap: 4px; margin: 0 0 16px; }
.wd-tab { flex: 1; font: 16px/1.1 var(--f-ui); color: var(--gold); text-shadow: var(--outline); cursor: pointer; padding: 10px 10px 9px;
  background: linear-gradient(#2c241b, #120f0c); border: 1px solid #000; border-radius: 4px 4px 0 0; box-shadow: inset 0 0 0 1px #3d3428; }
.wd-tab small { display: block; font-size: 12.5px; color: var(--grey); margin-top: 3px; }
.wd-tab[aria-pressed="true"] { color: #fff; background: linear-gradient(#4a3c28, #1b1611); box-shadow: inset 0 0 0 1px #8a6d2a, inset 0 -2px 0 var(--gold); }
.wd-tab[aria-pressed="true"] small { color: var(--text); }
.wd-tab:hover { color: #fff; }

/* from -> to */
.wd-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 16px; }
.wd-end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wd-end > div { min-width: 0; }
.wd-end.to { flex-direction: row-reverse; text-align: right; }
.wd-end .wd-k { display: block; font-size: 12.5px; color: var(--grey); }
.wd-n { display: block; color: #fff; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-v { display: block; font-size: 14px; }
.wd-arrow { font: 32px/1 var(--f-title); color: var(--gold); text-shadow: var(--outline); }

/* characters: the quest log list */
.wd-sub { font-size: 14px; color: var(--gold); margin: 0 0 6px; }
.wd-chars { padding: 4px; margin-bottom: 16px; display: grid; gap: 2px; }
.wd-char { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; cursor: pointer; border-radius: 2px; }
.wd-char input { margin: 0; width: 16px; height: 16px; cursor: pointer; }
.wd-char:hover { background: rgba(255, 209, 0, .07); }
.wd-char:has(input:checked) { background: url("/wow/ui/quest-log-title-highlight.png") 0 0 / 100% 100%; }
.wd-who-n { color: #fff; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-char .on { color: var(--green); font-size: 13px; margin-left: 8px; }
.wd-char .off { color: var(--grey); font-size: 13px; margin-left: 8px; }
.wd-m { text-align: right; white-space: nowrap; }
.wd-m .pend { display: block; font-size: 13px; color: var(--orange-ui); }
.wd-empty { color: var(--muted); font-size: 15px; padding: 8px 6px; margin: 0; }
.wd-empty.err { color: var(--red); }
.wd-skel { height: 32px; margin: 2px 0; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.09), rgba(255,255,255,.03)) 0 0 / 200% 100%; animation: wd-sk 1.2s linear infinite; }
@keyframes wd-sk { to { background-position: -200% 0; } }

/* amount */
.wd-amount { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wd-amount label { color: var(--gold); font-size: 15px; }
.wd-money { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 200px; max-width: 300px; }
.wd-money .input { flex: 1; min-width: 0; height: 42px; font-size: 22px; text-align: right; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.wd-money .input::-webkit-inner-spin-button, .wd-money .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wd-money .coin { width: 24px; height: 24px; margin: 0; }
.wd-rule { font-size: 14px; color: var(--muted); margin: 8px 0 0; }

/* the loading bar: cooldown and the transfer */
.wd-bar { position: relative; height: 15px; margin: 30px 40px 12px; background: rgba(0,0,0,.7);
  border: 0 solid transparent; border-image: url("/wow/ui/load-border-c.png") 17 38 / 17px 38px / 17px 38px; }
.wd-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: url("/wow/ui/load-fill.png") 0 0 / 100% 100%; transition: width .4s linear; }
.wd-bar.cool .wd-fill { filter: grayscale(.55) brightness(.9); }
.wd-bar.ok .wd-fill { filter: hue-rotate(-85deg) saturate(1.6) brightness(1.1); }
.wd-bar.fail .wd-fill { filter: hue-rotate(155deg) saturate(2.2) brightness(.95); }
.wd-bar.waiting .wd-fill { width: 100% !important; animation: wd-wait 1.6s ease-in-out infinite; }
@keyframes wd-wait { 50% { opacity: .35; } }
.wd-bar.ok { box-shadow: 0 0 14px rgba(30, 255, 0, .35); }
.wd-bar-t { position: absolute; inset: -2px 0 0; display: grid; place-items: center; font-size: 13.5px; color: #fff; text-shadow: var(--outline); white-space: nowrap; overflow: hidden; }
.wd-note { text-align: center; font-size: 14px; color: var(--text); margin: 0 0 6px; overflow-wrap: anywhere; }
.wd-go { display: flex; justify-content: center; margin-top: 20px; }
.wd-go .btn-glue[disabled] { cursor: not-allowed; }
.wd-hint { text-align: center; color: var(--red); font-size: 15px; margin: 10px 0 4px; }
.wd-hint:empty, .wd-note:empty { margin: 0; }

/* balances */
.wd-live { margin-left: auto; font: 13px var(--f-ui); color: var(--grey); display: inline-flex; align-items: center; gap: 6px; text-shadow: var(--outline); }
.wd-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); }
.wd-live.on { color: var(--green); }
.wd-live.on i { background: var(--green); box-shadow: 0 0 6px var(--green); animation: wd-beat 2s ease-in-out infinite; }
@keyframes wd-beat { 50% { opacity: .45; } }
.wd-bal { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 2px; }
.wd-bal + .wd-bal { border-top: 1px dotted rgba(255, 209, 0, .15); }
.wd-bal .wd-k { display: block; }
.wd-big { display: block; font-size: 21px; line-height: 1.25; }
.wd-big.up .amt { animation: wd-up 1.4s ease-out; } .wd-big.down .amt { animation: wd-down 1.4s ease-out; }
@keyframes wd-up { from { color: var(--green); } } @keyframes wd-down { from { color: var(--red); } }
.wd-bal.pending .wd-k { color: var(--orange-ui); }
.wd-bal.pending p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.wd-stats { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.wd-stats .stat > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-stats a { color: #3e9bff; }
.wait { color: var(--orange-ui); }

/* activity */
.wd-act { margin-top: 30px; }
.wd-aside { margin-left: auto; font-size: 13.5px; color: var(--muted); }
.wd-feed { max-height: 300px; }
.wd-feed p { overflow-wrap: anywhere; color: #ffff00; }
.wd-feed .plus { color: var(--green); } .wd-feed .minus { color: #ff6060; }
.wd-feed .me { color: #ffc0ff; } .wd-feed p.red { color: var(--red); } .wd-feed p.grey { color: var(--grey); }
.wd-feed .coin { margin-left: .15em; }
.wd-feed p.new { animation: wd-new 2s ease-out; }
@keyframes wd-new { from { background: rgba(255, 209, 0, .18); } }

.wd-rules { max-width: 760px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) { .wd-skel, .wd-bar.waiting .wd-fill, .wd-live.on i, .wd-feed p.new, .wd-big .amt { animation: none !important; } .wd-fill { transition: none; } }
@media (max-width: 960px) {
  .wd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body[data-page="withdraw"] .band { min-height: 0; }
  .wd { margin-top: 28px; }
  .wd-who { display: flex; }
  .wd-ex { padding: 6px 4px 10px; }
  .wd-tab { font-size: 15px; padding: 8px 4px 7px; }
  .wd-tab small { font-size: 11.5px; }
  .wd-route { gap: 6px; }
  .wd-ico { width: 34px; height: 34px; }
  .wd-n { font-size: 15px; }
  .wd-v { font-size: 13px; }
  .wd-arrow { font-size: 24px; }
  .wd-char { padding: 7px 4px; gap: 8px; }
  .wd-who-n { font-size: 16px; }
  .wd-amount label { width: 100%; }
  .wd-money { flex: 1 1 0; min-width: 0; max-width: none; }
  .wd-go .btn-glue { width: 100%; min-width: 0; font-size: 17px; }
  .wd-bar { margin: 30px 34px 12px; }
  .wd-aside { display: none; }
  .wd-stats .stat { flex-wrap: wrap; }
}

/* the MITH token address, with copy */
.wd-ca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; font-size: 14px; }
.wd-ca-k { color: #ffd100; }
.wd-ca code { font: 14px ui-monospace, "Cascadia Mono", Consolas, monospace; color: #fff; background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 209, 0, .3); border-radius: 3px; padding: 4px 9px; user-select: all; overflow-wrap: anywhere; }
.wd-ca a { font-size: 13px; }