/* Update 2 — card appearance QA refinement; no financial record or calculation changes. */
.u2-card-bank-section{display:grid;gap:12px;margin:0 0 12px}
.u2-card-bank-section>.field{margin:0!important}
.u2-card-bank-section .u2-card-appearance-fields{display:grid;gap:10px;margin:0}
.u2-card-bank-section .u2-card-appearance-fields>.field{margin:0!important}
.u2-card-bank-section .u2-product-art-hint{font-size:11px;line-height:1.45;color:#516f65;margin:0 0 2px}
.u2-card-bank-section [hidden],.u2-card-appearance-fields [hidden],.u2-wizard-generic-field[hidden]{display:none!important}
.u2-empty-legacy-grid{display:none!important}
.u2-editor-look{max-width:455px;margin:0 auto 22px!important}
/* For official previews show the bank-supplied artwork ABOVE the fallback background. */
.u2-real-card{isolation:isolate;display:flex;justify-content:space-between;position:relative}
.u2-real-card:before{z-index:0;pointer-events:none}
.u2-real-card.u2-official-look:before{display:none}
.u2-real-card .u2-real-official-image{z-index:1!important;object-fit:contain!important;background:#f5f8f6;border-radius:inherit}
.u2-real-card>.u2-real-top,.u2-real-card>.u2-card-chip,.u2-real-card>.u2-real-bottom{z-index:2;position:relative}
.u2-real-card.u2-official-look>.u2-card-chip{display:none}
.u2-real-card.u2-official-look>.u2-real-top{background:rgba(3,34,28,.88);border-radius:7px;padding:6px 9px;max-width:100%;align-self:stretch}
.u2-real-card.u2-official-look>.u2-real-bottom{background:rgba(3,34,28,.88);padding:8px 10px;border-radius:7px;max-width:100%;width:100%}
.u2-real-card.u2-official-look .u2-real-digits{font-size:clamp(10px,2vw,14px)}
.u2-real-card.u2-artwork-unavailable>.u2-card-chip{display:block}
.u2-real-card.u2-artwork-unavailable>.u2-real-top,.u2-real-card.u2-artwork-unavailable>.u2-real-bottom{background:none}
.u2-real-top{gap:12px}.u2-real-top span{max-width:83%;white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.u2-real-network{height:31px;min-width:45px;max-width:80px;overflow:hidden;font-size:10px}
.u2-real-network img{width:64px;height:29px;object-fit:contain;max-width:100%}
.u2-real-card.u2-real-ivory:not(.u2-official-look) .u2-real-bottom,.u2-real-card.u2-real-silver:not(.u2-official-look) .u2-real-bottom{color:#192b2b}
/* Remove the obsolete blue rectangle around a realistic card. */
.finance-mini-card-v145.u2-card-finance-appearance{height:auto!important;min-height:0!important;max-width:min(100%,450px)!important;background:#f9fcfb!important;box-shadow:0 11px 28px rgba(1,30,22,.09)!important;border:1px solid rgba(6,78,59,.16)!important;border-radius:21px!important;padding:9px!important;overflow:visible!important;display:flex!important;flex-direction:column!important;gap:4px!important;color:#102d28!important;align-items:stretch!important;text-align:left!important}
.finance-mini-card-v145.u2-card-finance-appearance:before,.finance-mini-card-v145.u2-card-finance-appearance:after{display:none!important}
.finance-mini-card-v145.u2-card-finance-appearance .u2-card-surface{display:block;order:0;flex:none;width:100%}
.finance-mini-card-v145.u2-card-finance-appearance .u2-real-card{width:100%;max-width:none;min-height:0;padding:15px 16px;box-shadow:none;margin:0;aspect-ratio:1.68/1}
.finance-mini-card-v145.u2-card-finance-appearance>.finance-mini-card-amount{order:1;padding:9px 8px 0!important;color:#17382e!important;font-weight:750!important;font-size:18px!important;line-height:1.15!important;margin:0!important;position:relative!important;inset:auto!important;transform:none!important}
.finance-mini-card-v145.u2-card-finance-appearance>.finance-mini-card-label{order:2;padding:0 8px 8px!important;color:#61746e!important;font-size:12px!important;line-height:1.2!important;margin:0!important;position:relative!important;inset:auto!important;transform:none!important}
.finance-mini-card-v145.u2-card-finance-appearance>.cc-top,.finance-mini-card-v145.u2-card-finance-appearance>.cc-bottom{display:none!important}
/* Finance overview card carousel retains its own swipe metrics, with matching artwork. */
.finance-card-carousel-v145 .finance-mini-card-v145.u2-card-finance-appearance{flex-shrink:0!important}
/* Premium emerald, not the old purple, for Add Card and Save & Next. */
#modal-root .modal:has(.u2-card-bank-section) form>button.primary,
#modal-root .modal:has(#u2-wizard-preview) .grid2 button.primary{
 background:#064e3b!important;color:#fff!important;border:1px solid #0b674d!important;box-shadow:0 7px 18px #004b3420!important}
#modal-root .modal:has(.u2-card-bank-section) select:focus-visible,
#modal-root .modal:has(.u2-card-bank-section) input:focus-visible,
#modal-root .modal:has(#u2-wizard-preview) select:focus-visible{outline:2px solid #167757!important;outline-offset:1px}
@media (max-width:520px){.u2-real-card{padding:14px 15px}.u2-real-top{font-size:10px}.u2-card-bank-section{gap:9px}}
/* Never show a blank white bank card while the official photo is loading. */
.u2-real-card .u2-real-official-image{opacity:1!important;transition:none!important;background:transparent!important}
.u2-logo-wrapper{display:inline-flex;position:relative;align-items:center;justify-content:center;min-width:50px;min-height:26px}
.u2-logo-wrapper img{position:absolute;inset:0;margin:auto;max-height:28px;object-fit:contain}
.u2-logo-fallback{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.u2-logo-fallback[hidden]{display:none!important}
.u2-real-card,.u2-card-finance-appearance,.u2-card-finance-appearance .u2-card-surface{box-sizing:border-box!important;min-width:0}

/* Bank photos are never hidden while waiting for an inline image onload event. */
.u2-real-card.u2-official-look>.u2-real-official-image{display:block!important;opacity:1!important;visibility:visible!important;z-index:1!important}
.u2-artwork-warning{position:absolute;z-index:5;right:10px;top:40px;font-size:10px;color:#fff;background:rgba(98,53,26,.87);padding:4px 7px;border-radius:7px;max-width:60%;white-space:normal}

/* Network-style cards intentionally omit the extra network label; allow full labels elsewhere. */
.u2-real-card .u2-real-network{height:auto;max-width:110px;overflow:visible;line-height:1.15;white-space:normal}
.u2-real-card.u2-bg-network{background:var(--u2-card-base)!important}
.u2-real-card .u2-card-bg{z-index:0}