/* Wallet page: balance card, actions, earnings, deliveries and history. Blue and white like the rest of Nile Mart. */
.wl .pg-head{margin-bottom:18px}
.wl-top{display:grid;gap:18px}
@media (min-width:900px){.wl-top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}}

.wl-card{position:relative;overflow:hidden;border-radius:22px;padding:22px 22px 18px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,#2B6BF3 0%,rgba(43,107,243,0) 55%),linear-gradient(135deg,#0B1B3A 0%,#12306B 48%,#1456F0 100%);
  box-shadow:0 22px 48px rgba(20,86,240,.22);display:flex;flex-direction:column;gap:4px;min-height:236px}
.wl-card::before,.wl-card::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.wl-card::before{width:320px;height:320px;right:-120px;bottom:-170px}
.wl-card::after{width:220px;height:220px;right:-40px;bottom:-120px;border-color:rgba(255,255,255,.18)}
.wl-card>*{position:relative;z-index:1}
.wl-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wl-brand{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--f-display);letter-spacing:.02em;opacity:.92}
.wl-eye{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.wl-eye:hover{background:rgba(255,255,255,.2)}
.wl-lbl{font-size:12.5px;opacity:.75;letter-spacing:.02em}
.wl-bal{font:800 clamp(34px,7vw,46px)/1.05 var(--f-display);letter-spacing:-.025em}
.wl-sub{font-size:13px;opacity:.78;margin-top:2px}
.wl-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;margin-top:auto;padding-top:20px}
.wl-act{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;color:#fff;font-size:12.5px;font-weight:600;padding:4px 0}
.wl-act span{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;transition:background .15s,transform .15s}
.wl-act:hover span{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.wl-act:first-child span{background:#fff;color:var(--blue)}
.wl-act[disabled]{opacity:.45;cursor:not-allowed}
.wl-sk{background:var(--soft);box-shadow:none;gap:14px}

.wl-side{display:flex;flex-direction:column;gap:14px}
.wl-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wl-stat{border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:2px;background:#fff}
.wl-stat small{color:var(--muted);font-size:12.5px}
.wl-stat b{font:700 19px var(--f-display);letter-spacing:-.01em}
.wl-si{width:30px;height:30px;border-radius:9px;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;margin-bottom:6px}
.wl-si.in{background:#E3F5EA;color:var(--ok)}
.wl-si.out{background:#FFF1E0;color:var(--warn)}
.wl-how{display:flex;gap:10px;align-items:flex-start;background:var(--blue-xl);border:1px solid #D3E0FA;border-radius:16px;padding:14px 16px;font-size:13.5px}
.wl-how .ic{color:var(--blue);margin-top:1px}

.wl-sec{margin-top:28px}
.wl-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.wl-sec-h h2{font-size:20px}
.wl-sec-h .muted{font-size:13px}
.wl-cols{display:grid;gap:0 24px}
@media (min-width:1000px){.wl-cols{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}

.wl-pots{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.wl-pot{border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:4px;background:linear-gradient(180deg,#fff 0%,var(--blue-xl) 100%)}
.wl-pot-h{display:flex;align-items:center;gap:10px;font-size:14px}
.wl-pot-ic{width:36px;height:36px;border-radius:11px;background:var(--blue);color:#fff;display:grid;place-items:center}
.wl-pot-bal{font:800 26px var(--f-display);letter-spacing:-.02em;margin-top:6px}
.wl-pot-meta{font-size:12.5px;color:var(--muted)}
.wl-pot-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.wl-pot-acts .btn{padding:8px 12px;font-size:12.5px;background:#fff}

.wl-dcount{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.wl-dc{border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;text-align:left;display:grid;gap:1px;color:var(--ink);transition:border-color .15s,background .15s}
.wl-dc:hover{border-color:#BFD0F5}
.wl-dc.on{border-color:var(--blue);background:var(--blue-xl);box-shadow:inset 0 0 0 1px var(--blue)}
.wl-dc b{font:800 28px/1.1 var(--f-display);color:var(--blue)}
.wl-dc span{font-weight:600;font-size:14px}
.wl-dc small{color:var(--muted);font-size:12px}
.wl-clear{margin-top:10px}

.wl-seg{gap:4px;background:var(--soft);border-radius:11px;padding:4px}
.wl-seg button{border:0;background:none;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--muted)}
.wl-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,27,58,.1)}

.wl-list{border:1px solid var(--line);border-radius:18px;background:#fff;padding:4px 14px;margin-top:12px}
.wl-sec-h+.wl-list{margin-top:0}
.wl-day{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:14px 0 4px}
.wl-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.wl-row:last-child{border-bottom:0}
.wl-ric{width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--ink);display:grid;place-items:center;flex:none}
.wl-ric.in{background:#E3F5EA;color:var(--ok)}
.wl-ric.out{background:var(--blue-l);color:var(--blue)}
.wl-rt{flex:1;min-width:0;display:grid}
.wl-rt b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-rt small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-rr{display:grid;justify-items:end;gap:2px}
.wl-rr small{color:var(--muted);font-size:11.5px}
.wl-ramt{font:700 14.5px var(--f-display);white-space:nowrap}
.wl-ramt.in{color:var(--ok)}
.wl-empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--muted);padding:28px 12px;font-size:13.5px}
.wl-empty .ic{color:#9FB3DA}

/* profile shortcut */
.wl-strip{display:flex;align-items:center;gap:14px;width:100%;margin:16px 0 20px;padding:14px 16px;border:0;border-radius:18px;text-align:left;color:#fff;
  background:linear-gradient(135deg,#0B1B3A 0%,#12306B 55%,#1456F0 100%);box-shadow:0 12px 28px rgba(20,86,240,.18)}
.wl-strip-ic{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.wl-strip .t{display:grid}
.wl-strip small{opacity:.75;font-size:12px}
.wl-strip b{font:800 20px var(--f-display);letter-spacing:-.01em}
.wl-strip .muted{color:rgba(255,255,255,.72);font-size:12.5px;margin-left:auto;text-align:right}
@media (max-width:520px){.wl-strip .muted{display:none}.wl-strip>.ic:last-child{margin-left:auto}}

/* sheets */
.wl-amt{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:0 14px;height:58px}
.wl-amt:focus-within{border-color:var(--blue);background:#fff}
.wl-amt span{font:700 22px var(--f-display);color:var(--muted);margin-right:6px}
.wl-amt input,.wl-amt input:focus{flex:1;min-width:0;border:0;box-shadow:none;outline:none;height:auto;background:transparent;outline:none;font:800 26px var(--f-display);letter-spacing:-.01em;padding:0}
.wl-quick{padding-bottom:4px}
.wl-quick .chip.on{border-color:var(--blue);background:var(--blue-xl);color:var(--blue)}
.wl-break{border:1px solid var(--line);border-radius:14px;padding:4px 14px}
.wl-break div{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;border-bottom:1px dashed var(--line)}
.wl-break div:last-child{border-bottom:0}
.wl-break .tot{font-weight:700}
.wl-break .tot b{font:800 17px var(--f-display)}
.wl-src{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.wl-srcb{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;display:grid;gap:2px;text-align:left;color:var(--ink)}
.wl-srcb span{font-size:12.5px;color:var(--muted)}
.wl-srcb b{font:700 16px var(--f-display)}
.wl-srcb.on{border-color:var(--blue);background:var(--blue-xl);box-shadow:inset 0 0 0 1px var(--blue)}
.seg-fill small{display:block;font-size:11px;opacity:.75;font-weight:500}
@media (max-width:560px){.wl-card{border-radius:20px;padding:20px 18px 16px}.wl-list{padding:2px 12px}.wl-stat b{font-size:17px}}