/* Wallet platform shared pieces: list chips, bulk bar, data-driven panels, feeds, key-value lists, balance cards,
   bucket bars, hierarchy trees, timelines and the customer wallet home. Brand colours come from the CSS variables. */
.wl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink, #1c2b3a); font-size: 12px; text-decoration: none; }
.wl-chip b { color: var(--brand-primary); }
.wl-chip.on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.wl-chip.on b { color: #fff; }
.wl-tbl td .sub { display: block; color: #6b7c93; font-size: 11.5px; }
.wl-tbl td a b, .wl-tbl td b { white-space: nowrap; }
.wl-tick { width: 30px; }
.wl-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: #f7fafd; }
.wl-saved { flex-wrap: wrap; gap: 6px; }
.wl-panel .ct-empty { padding: 26px 12px; }
.wl-gauge { display: flex; justify-content: center; padding: 6px 0; }
.wl-meters { display: grid; gap: 12px; padding: 4px 0; }
.wl-feed { list-style: none; margin: 0; padding: 0; }
.wl-feed li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.wl-feed li:last-child { border-bottom: 0; }
.wl-fi { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; background: #e6f0fb; color: var(--brand-primary); }
.wl-fi.ok { background: #e3f6ee; color: #04955d; } .wl-fi.warn { background: #fdf2dc; color: #b06d00; } .wl-fi.bad { background: #fde6e6; color: #c62a3a; }
.wl-ft { min-width: 0; } .wl-ft b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wl-ft small { color: #6b7c93; display: block; overflow-wrap: anywhere; }
.wl-fw { color: #6b7c93; font-size: 12px; white-space: nowrap; }
.wl-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; margin: 0; }
.wl-kv dt { color: #4b5d73; } .wl-kv dd { margin: 0; text-align: right; font-weight: 700; }
.wl-grid { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wl-grid > * { min-width: 0; }
.wl-s3 { grid-column: span 3; } .wl-s4 { grid-column: span 4; } .wl-s5 { grid-column: span 5; } .wl-s6 { grid-column: span 6; } .wl-s7 { grid-column: span 7; } .wl-s8 { grid-column: span 8; } .wl-s12 { grid-column: span 12; }
@media (max-width: 1100px) { .wl-s3, .wl-s4 { grid-column: span 6; } .wl-s5, .wl-s7, .wl-s8 { grid-column: span 12; } .wl-s6 { grid-column: span 12; } }
@media (max-width: 640px) { .wl-s3, .wl-s4, .wl-s6 { grid-column: span 12; } }

/* Balance cards (wallet home, wallet pages) */
.wl-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wl-card { position: relative; border-radius: 12px; padding: 16px 16px 14px; color: #fff; background: linear-gradient(135deg, var(--brand-navy), var(--brand-primary)); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-navy) 25%, transparent); min-width: 0; overflow: hidden; }
.wl-card.c2 { background: linear-gradient(135deg, #0c4a6e, var(--brand-accent)); }
.wl-card.c3 { background: linear-gradient(135deg, #1e3a5f, #3a7bd5); }
.wl-card.c4 { background: linear-gradient(135deg, #14532d, #16a34a); }
.wl-card.c5 { background: linear-gradient(135deg, #4c1d95, #7c3aed); }
.wl-card .cur { font-size: 12px; opacity: .85; display: flex; justify-content: space-between; gap: 8px; }
.wl-card .amt { font-size: 24px; font-weight: 800; margin: 6px 0 2px; overflow-wrap: anywhere; }
.wl-card .avail { font-size: 12px; opacity: .9; }
.wl-card .acct { margin-top: 10px; font-size: 11.5px; opacity: .9; font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.wl-card a { color: #fff; }
.wl-card .flag { position: absolute; right: 14px; top: 12px; font-size: 11px; background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 999px; }
.wl-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wl-actions a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none; color: var(--brand-navy); font-weight: 700; font-size: 12.5px; text-align: center; }
.wl-actions a i { font-size: 20px; color: var(--brand-primary); }
.wl-actions a:hover { border-color: var(--brand-primary); background: #f2f8ff; }
@media (max-width: 560px) { .wl-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Balance buckets bar */
.wl-buckets { display: grid; gap: 8px; }
.wl-bucketbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #edf2f7; }
.wl-bucketbar i { display: block; height: 100%; }
.wl-blegend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 12px; color: #4b5d73; }
.wl-blegend span { display: inline-flex; align-items: center; gap: 6px; } .wl-blegend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.wl-blegend b { color: var(--brand-navy); }

/* Wallet hierarchy */
.wl-tree { list-style: none; margin: 0; padding: 0 0 0 4px; }
.wl-tree ul { list-style: none; margin: 0; padding-left: 22px; border-left: 1px dashed #c7d3e0; }
.wl-tree li { padding: 6px 0; }
.wl-tree .node { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wl-tree .node .num { margin-left: auto; font-weight: 700; }

/* Steps and confirmation boxes before money moves */
.wl-confirm { border: 1px solid #cfe0f3; background: #f5f9ff; border-radius: 8px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
.wl-confirm dt { color: #4b5d73; } .wl-confirm dd { margin: 0; font-weight: 700; text-align: right; }
.wl-confirm .total { border-top: 1px solid #cfe0f3; padding-top: 6px; }
.wl-note { font-size: 12.5px; color: #4b5d73; }
.wl-qr { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.wl-qr svg { display: block; width: 180px; height: 180px; }
.wl-code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: #0f1d33; color: #d6e4f5; padding: 12px 14px; border-radius: 8px; overflow-x: auto; position: relative; white-space: pre; }
.wl-mono { font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.wl-demo { display: inline-block; font-size: 11px; font-weight: 700; color: #8a5a00; background: #fff4d6; border: 1px solid #f1d58a; border-radius: 4px; padding: 1px 6px; }
.wl-split { display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .wl-split { grid-template-columns: minmax(0, 1fr); } }
.wl-actbar { display: flex; flex-wrap: wrap; gap: 8px; }