/* The portal sits inside somebody else's theme, so every rule is scoped to
       .whp and the structural ones are forced. A theme that styles tables or
       links globally would otherwise redraw half of this. */
    .whp, .whp-guest {
        --navy:#0e1c38; --navy-2:#13294f; --navy-3:#1b3a6b;
        --gold:#f2b21c; --gold-2:#ffc94d;
        --ink:#17233d; --muted:#6b7a99; --faint:#9aa8c0;
        --line:#e6ebf3; --page:#f4f6fa;
        --green:#15a05e; --red:#e0362c; --link:#1f5fbf;
        font-family:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
        color:var(--ink); line-height:1.45;
    }
    .whp *, .whp-guest * { box-sizing:border-box; }
    .whp { display:flex; flex-direction:column; min-height:100vh; width:100%;
           max-width:none; margin:0; background:var(--page); }
    /* the navy column has to reach the bottom of the page, not stop where its
       own links end, so the frame stretches rather than sitting at the top */
    .whp-body { flex:1 1 auto; }

    .whp h1,.whp h2,.whp h3 { margin:0; color:var(--ink); }
    .whp p { margin:0; }
    .whp a { text-decoration:none; color:inherit; }
    .whp .whp-i { width:20px; height:20px; flex:0 0 auto; }

    .whp-msg { margin:0 0 16px; padding:12px 16px; border-radius:9px;
               background:#fdecea; color:var(--red); font-size:14px; }

    /* ---------- sign in ---------- */
    .whp-guest { display:flex; align-items:center; justify-content:center;
                 min-height:100vh; padding:40px 16px; background:var(--page); }
    .whp-login { width:100%; max-width:410px; background:#fff; border-radius:14px;
                 padding:32px; box-shadow:0 4px 24px rgba(14,28,56,.10); }
    .whp-login-brand { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
    .whp-login-brand strong { font-size:15px; letter-spacing:.14em; color:var(--navy); }
    .whp-logo { display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
                background:var(--gold); color:var(--navy); font-weight:800; font-size:18px; }
    .whp-logo-img { display:block; width:auto; max-width:230px; object-fit:contain;
                    border-radius:10px; }
    .whp-login .whp-logo-img { max-width:200px; }
    .whp-login h2 { font-size:21px; }
    .whp-login-sub { margin:6px 0 20px !important; font-size:14px; color:var(--muted); }
    .whp-guest label { display:block; margin:14px 0 5px; font-size:12px; font-weight:700;
                       letter-spacing:.03em; color:var(--muted); }
    .whp-guest input { width:100%; padding:12px 14px; border:1px solid #d6dde9;
                       border-radius:9px; font-size:15px; background:#fff; color:var(--ink); }
    .whp-guest input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,178,28,.18); }
    .whp-guest button[type="submit"] { width:100%; margin-top:22px; padding:13px;
                        border:2px solid var(--gold); border-radius:9px;
                        background:var(--gold); color:var(--navy); font-size:15px; font-weight:700;
                        letter-spacing:.02em; cursor:pointer;
                        transition:background .15s, color .15s, border-color .15s; }
    .whp-guest button[type="submit"]:hover,
    .whp-guest button[type="submit"]:focus-visible {
                        background:#ffffff; color:#1c2733; border-color:#1c2733; }
    .whp-login-alt { margin:18px 0 0; text-align:center; font-size:13.5px; }
    .whp-login-alt a { color:var(--link); font-weight:600; }
    .whp-login-alt a:hover { text-decoration:underline; }

    /* the reveal control: the outline of an eye inside the field, nothing else.
       No box, no fill, no hover panel — it should read as part of the input. */
    .whp-pass { position:relative; display:block; }
    .whp-pass input { padding-right:42px; }
    .whp .whp-eye, .whp-guest .whp-eye, .whp-form .whp-eye {
        position:absolute; top:50%; right:12px; transform:translateY(-50%);
        width:20px !important; height:20px !important; min-width:0;
        margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
        background:none !important; box-shadow:none !important; color:#9aa5b1; cursor:pointer;
        display:block; opacity:.85; transition:opacity .15s, color .15s; }
    .whp .whp-eye:hover, .whp-guest .whp-eye:hover, .whp-form .whp-eye:hover,
    .whp .whp-eye:focus-visible, .whp-guest .whp-eye:focus-visible {
        background:none !important; color:#5b6775; opacity:1; }
    .whp-eye svg { display:block; width:20px; height:20px; stroke-width:1.6; }
    .whp-eye .whp-eye-off { display:none; }
    .whp-eye.is-on .whp-eye-on { display:none; }
    .whp-eye.is-on .whp-eye-off { display:block; }
    .whp[dir="rtl"] .whp-pass input, .whp-guest[dir="rtl"] .whp-pass input { padding-right:13px; padding-left:42px; }
    .whp[dir="rtl"] .whp-eye, .whp-guest[dir="rtl"] .whp-eye { right:auto; left:12px; }

    /* ---------- top bar ---------- */
    .whp-top { display:flex; align-items:center; gap:22px; padding:14px 26px; background:var(--navy); color:#fff; }
    .whp-top-brand { display:flex; align-items:center; gap:11px; }
    .whp-wordmark { font-size:15px; font-weight:700; letter-spacing:.18em; }
    .whp-tagline { font-size:12.5px !important; font-style:italic; color:#a9b8d4;
                   padding-left:22px; border-left:1px solid rgba(255,255,255,.16); }
    .whp-top-right { display:flex; align-items:center; gap:16px; margin-left:auto; }
    .whp-who { display:flex; align-items:center; gap:10px; }
    .whp-avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
                  background:rgba(255,255,255,.14); color:#cfd9ec; }
    .whp-who-txt strong { display:block; font-size:14px; color:#fff; }
    .whp-who-txt em { font-size:12px; font-style:normal; color:#9fb0cf; }
    .whp-langs { display:inline-flex; align-items:center; gap:2px; padding:3px;
                 border-radius:9px; background:rgba(255,255,255,.10); }
    .whp .whp-lang { display:grid; place-items:center; min-width:30px; height:26px; padding:0 8px;
                     border-radius:7px; font-size:11.5px; font-weight:700; letter-spacing:.03em;
                     color:#b9c7e0; text-decoration:none; transition:background .15s, color .15s; }
    .whp .whp-lang:hover { color:#fff; }
    .whp .whp-lang.is-on { background:var(--gold); color:var(--navy); }

    .whp-exit { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; color:#cfd9ec; }
    .whp-exit:hover { background:rgba(255,255,255,.12); color:#fff; }

    /* ---------- frame ---------- */
    .whp-body { display:grid; grid-template-columns:248px minmax(0,1fr) 330px; align-items:stretch; }
    .whp-side { background:var(--navy); color:#c6d2e8; padding:16px 0 26px; }
    /* Only opacity and transform are animated — both are composited, so a
       swap never asks the browser to re-lay-out mid-motion, which is what
       produces the stutter this used to have. */
    .whp-main { padding:26px; min-width:0;
                transition:opacity .11s linear, transform .11s cubic-bezier(.2,.8,.3,1); }
    /* the two ends of a swap: the old view leaves downward, the new one
       arrives from slightly above, so the movement reads as one motion */
    .whp-main.is-leaving { opacity:0; transform:translate3d(0,6px,0); pointer-events:none; }
    .whp-main.is-entering { opacity:0; transform:translate3d(0,-4px,0); transition:none; }

    /* a tap should answer before the network does */
    .whp a, .whp button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
    .whp-nav-item, .whp-tabs > *, .whp-acct, .whp-quick a, .whp-rail-actions a {
        transition:background-color .12s ease, color .12s ease,
                   transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .15s ease; }
    .whp-nav-item:active, .whp-tabs > *:active { transform:translate3d(0,0,0) scale(.97); }
    .whp-acct:active { transform:translate3d(0,0,0) scale(.985); }
    .whp-quick a:active, .whp-rail-actions a:active { transform:scale(.96); }
    .whp-rail { transition:opacity .15s ease; }
    .whp-rail-empty { padding:0; }

    /* only shows up once a request is slow enough to be worth reporting */
    .whp-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
                    background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
                    opacity:0; pointer-events:none;
                    transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .2s ease; }
    .whp-progress.is-on { opacity:1; }

    @media (prefers-reduced-motion: reduce) {
        .whp-main, .whp-rail, .whp-progress { transition:none !important; }
        .whp-main.is-leaving, .whp-main.is-entering { opacity:1; transform:none; }
    }
    .whp-rail { padding:26px 26px 26px 0; display:flex; flex-direction:column; gap:16px; align-content:start; }

    .whp-nav { display:flex; flex-direction:column; }
    .whp-nav-item { display:flex; align-items:center; gap:13px; padding:13px 22px;
                    font-size:14px; border-left:3px solid transparent; }
    .whp-nav-item.is-active { background:var(--navy-2); color:var(--gold); border-left-color:var(--gold); font-weight:600; }

    /* the holder's card at the foot of the sidebar, as in the design:
       copy on top, the card itself overlapping the bottom edge */
    .whp-sidecard + .whp-sidecard { margin-top:14px; }
    .whp-sidecard { position:relative; margin:26px 16px 0; padding:18px 18px 0;
                    border-radius:12px; overflow:hidden;
                    background:linear-gradient(160deg,#16294b,#0c1730); }
    .whp-sidecard strong { display:block; color:#fff; font-size:15px; line-height:1.3; }
    .whp-sidecard p { margin:8px 0 0 !important; font-size:12.5px; color:#9fb0cf; }
    .whp-sidecard a { display:inline-block; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--gold); }
    .whp-sidecard { perspective:800px; }
    .whp-sidecard-plastic { position:relative; display:block; width:112%; max-width:none;
                            margin:16px 0 -14px -6%;
                            transform:rotate(-7deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
                            filter:drop-shadow(0 10px 20px rgba(0,0,0,.50));
                            transition:transform .5s cubic-bezier(.2,.8,.3,1), filter .5s ease; }
    .whp-sidecard-plastic.is-tilting { transition:transform .08s linear;
                                       filter:drop-shadow(0 20px 32px rgba(0,0,0,.58)); }
    .whp-sidecard img { display:block; width:100%; border-radius:10px; }
    .whp-sidecard-plastic { container-type:inline-size; }

    .whp-sidepromo { margin:26px 16px 0; padding:18px; border-radius:12px;
                     background:linear-gradient(150deg,#14284d,#0c1730 90%); }
    .whp-sidepromo strong { display:block; color:#fff; font-size:14px; }
    .whp-sidepromo p { margin:7px 0 12px !important; font-size:12.5px; color:#9fb0cf; }
    .whp-sidepromo a { font-size:12.5px; font-weight:700; color:var(--gold); }

    /* ---------- greeting ---------- */
    .whp-hello { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
    .whp-hello h1 { font-size:27px; letter-spacing:-.01em; }
    .whp-hello p { margin-top:5px !important; font-size:14px; color:var(--muted); }
    .whp-when { display:flex; align-items:flex-start; gap:10px; font-size:12.5px;
                color:var(--muted); text-align:right; white-space:nowrap; }
    .whp-when .whp-i { color:var(--link); }

    /* ---------- account tiles ---------- */
    .whp-accounts { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:18px; }
    .whp-acct { position:relative; display:block; padding:20px; border-radius:13px; background:#fff;
                border:1px solid var(--line); transition:transform .15s, box-shadow .15s; }
    @media (hover:hover) {
        .whp-acct:hover { transform:translate3d(0,-2px,0); box-shadow:0 8px 22px rgba(14,28,56,.09); }
    }
    .whp-acct.is-open { background:linear-gradient(140deg,var(--navy),var(--navy-2)); border-color:transparent; color:#fff; }
    .whp-acct-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
    .whp-acct-ico { display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
                    border:1.5px solid var(--line); color:var(--navy); }
    .whp-acct.is-open .whp-acct-ico { border-color:rgba(255,255,255,.3); color:#fff; }
    /* a currency's own sign, sized to fit the circle whatever it is */
    .whp-acct-sym { font-size:17px; font-weight:700; line-height:1; letter-spacing:.01em; }
    .whp-acct-sym.is-long { font-size:12px; }
    .whp-acct-id strong { display:block; font-size:14px; }
    .whp-acct.is-open .whp-acct-id strong { color:#fff; }
    .whp-acct-id em { font-size:11.5px; font-style:normal; color:var(--muted); word-break:break-all; }
    .whp-acct.is-open .whp-acct-id em { color:#a9bbd8; }
    .whp-acct-bal { display:block; font-size:25px; font-weight:800; letter-spacing:-.02em; }
    .whp-acct-bal i { font-size:14px; font-weight:600; font-style:normal; color:var(--muted); margin-left:3px; }
    .whp-acct.is-open .whp-acct-bal i { color:#a9bbd8; }
    .whp-acct-approx { display:block; margin-top:5px; font-size:12.5px; color:var(--muted); }
    .whp-acct.is-open .whp-acct-approx { color:#9fb0cf; }
    .whp-acct-go { position:absolute; right:18px; bottom:16px; font-size:22px; color:var(--faint); }
    .whp-acct.is-open .whp-acct-go { color:#fff; }

    /* ---------- cards ---------- */
    .whp-card { background:#fff; border:1px solid var(--line); border-radius:13px; padding:20px; }
    .whp-card h3 { font-size:15px; margin-bottom:14px; }
    .whp-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
    .whp-card-head h2 { font-size:17px; }
    .whp-seeall { font-size:13px; font-weight:600; color:var(--link); }
    .whp-empty { font-size:14px; color:var(--muted); padding:10px 0; }

    /* ---------- operations ---------- */
    .whp .whp-ops-table { width:100%; border-collapse:collapse; margin-top:8px; }
    .whp .whp-ops-table th, .whp .whp-ops-table td { border:0 !important; box-shadow:none !important;
                                                     background-image:none !important; background:none; }
    .whp .whp-ops-table th { padding:10px 10px; text-align:left; font-size:12px; font-weight:600;
                             color:var(--muted); border-bottom:1px solid var(--line) !important; white-space:nowrap; }
    .whp .whp-ops-table td { padding:14px 10px; font-size:13.5px; border-bottom:1px solid #f1f4f9 !important; vertical-align:middle; }
    .whp .whp-ops-table tr:last-child td { border-bottom:0 !important; }
    .whp .whp-r { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
    .whp-op-date { color:var(--muted); white-space:nowrap; }
    .whp-op-ico { width:1%; padding-right:0 !important; }
    .whp-op-ico span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
                       background:#eef3fb; color:var(--navy); }
    .whp-op-desc strong { display:block; font-size:13.5px; font-weight:600; }
    .whp-op-desc em { font-size:12px; font-style:normal; color:var(--muted); }
    .whp-op-type { color:var(--muted); }
    .whp-op-bal { color:var(--ink); }
    .whp-in { color:var(--green); font-weight:600; }
    .whp-out { color:var(--red); font-weight:600; }

    /* ---------- quick actions ---------- */
    .whp-rail-actions { display:flex; flex-direction:column; gap:4px; }
    .whp-rail-actions a { display:flex; align-items:center; gap:13px; padding:9px 6px;
                          border-radius:9px; font-size:14px; }
    .whp-rail-actions a:hover { background:#f5f8fd; }
    .whp-quick-ico { display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
                     background:var(--gold); color:var(--navy); flex:0 0 auto; }
    .whp-quick { display:none; }

    /* ---------- card, rates, promos ---------- */
    .whp-cardbox { padding:18px; }
    .whp-cardbox .whp-card-head { margin-bottom:12px; }
    .whp-cardbox .whp-card-head h3 { margin:0; }
    .whp-cards-more { cursor:pointer; user-select:none; }
    .whp-cards-more:hover { text-decoration:underline; }
    /* the fold, like the rates panel: no script, no request */
    .whp-cards-toggle:not(:checked) ~ .whp-cards .is-extra { display:none; }
    .whp-cards-toggle:not(:checked) ~ .whp-card-head .whp-cards-more-shut,
    .whp-cards-toggle:checked ~ .whp-card-head .whp-cards-more-open { display:none; }

    /* ---------- the cards, in three dimensions ----------
       A perspective on the container and a tilt on each card, driven by the
       pointer. The sheen is a gradient that travels across the face as it
       turns, which is what sells the gloss of real plastic. All of it is
       transform and opacity, so it stays on the compositor. */
    .whp-cards { display:flex; flex-direction:column; gap:16px; perspective:900px; }
    /* the card beside its name and link, as in the design */
    .whp-cardrow { display:flex; align-items:flex-end; gap:12px; }
    /* The shadow is a filter, not a box-shadow.
       A card image is usually a PNG with its own rounded corners and transparent
       pixels outside them. box-shadow knows nothing about transparency: it draws
       a rounded rectangle behind the whole image box, and that rectangle shows
       through the transparent corners as a squared-off tab. drop-shadow follows
       the alpha channel instead, so it traces whatever shape the artwork is. */
    .whp-plastic { position:relative; margin:0; flex:1 1 auto; min-width:0;
                   container-type:inline-size;
                   --rx:0deg; --ry:0deg; --sx:50%;
                   transform:rotateX(var(--rx)) rotateY(var(--ry));
                   filter:drop-shadow(0 6px 14px rgba(14,28,56,.30));
                   transition:transform .5s cubic-bezier(.2,.8,.3,1), filter .5s ease; }
    .whp-plastic img { display:block; width:100%; aspect-ratio:1.586;   /* ISO 7810 ID-1 */
                       object-fit:cover; border-radius:10px; box-shadow:none; }

    /* the gloss: hidden until the card is touched, then swept across it */
    /* An opaque strip laid over the number printed on the artwork, carrying the
       holder's own digits instead. Sized in percentages so it scales with the
       card at any width, and positioned per card, because every design puts its
       number somewhere slightly different. The edges are feathered so the band
       sits into the artwork rather than on top of it. */
    .whp-plastic-num { position:absolute; left:0; right:0; z-index:2;
                       top:var(--numy, 60%); height:13%;
                       display:flex; align-items:center;
                       padding:0 7%;
                       background:#080d17;
                       -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
                               mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
                       color:#fff; font-weight:600; letter-spacing:.11em;
                       font-variant-numeric:tabular-nums; }
    .whp-plastic-num > span { font-size:clamp(9px, 5.4cqw, 15px); white-space:nowrap; }

    .whp-plastic::after { content:''; position:absolute; inset:0; border-radius:10px;
                          pointer-events:none; opacity:0; transition:opacity .35s ease;
                          background:linear-gradient(105deg,
                              rgba(255,255,255,0) calc(var(--sx) - 26%),
                              rgba(255,255,255,.42) var(--sx),
                              rgba(255,255,255,0) calc(var(--sx) + 26%) ); }
    .whp-plastic.is-tilting { transition:transform .08s linear;
                              filter:drop-shadow(0 16px 28px rgba(14,28,56,.38)); }
    .whp-plastic.is-tilting::after { opacity:1; }

    /* a hint that more cards sit behind this one */
    .whp-cards-toggle:not(:checked) ~ .whp-cards .whp-cardrow:first-child .whp-plastic::before {
        content:''; position:absolute; inset:7px -5px -7px 5px; border-radius:10px;
        background:#dfe5ee; z-index:-1; transform:rotate(2.2deg); }
    .whp-plastic-blank { display:grid; place-items:center; width:100%; aspect-ratio:1.586;
                         border-radius:10px; color:#8fa2c4;
                         background:linear-gradient(130deg,#0d1b34,#1d3a66 60%,#0d1b34); }
    .whp-plastic-blank .whp-i { width:28px; height:28px; }
    /* A fixed column, not one that sizes to its text. Left to grow, a longer
       card name takes width from the image beside it, and two cards in the same
       list end up drawn at different sizes. */
    .whp-cardmeta { flex:0 0 96px; width:96px; padding-bottom:4px; overflow-wrap:anywhere; }
    .whp-cardmeta strong { display:block; font-size:12.5px; line-height:1.3; color:var(--ink); }
    .whp .whp-cardmeta a { display:inline-block; margin-top:6px; font-size:12px;
                           font-weight:600; color:var(--link); }
    .whp .whp-cardmeta a:hover { text-decoration:underline; }

    .whp-fx .whp-card-head { margin-bottom:4px; }
    .whp-fx .whp-card-head h3 { margin:0; }
    .whp-fx-more { cursor:pointer; user-select:none; }
    .whp-fx-more:hover { text-decoration:underline; }
    /* the fold, done with a checkbox so it needs no script and no request */
    .whp-fx-toggle:not(:checked) ~ ul .is-extra { display:none; }
    .whp-fx-toggle:not(:checked) ~ .whp-card-head .whp-fx-more-shut,
    .whp-fx-toggle:checked ~ .whp-card-head .whp-fx-more-open { display:none; }
    .whp-fx-when { margin:-8px 0 12px !important; font-size:11.5px; color:var(--faint); }
    .whp-fx ul { list-style:none; margin:0; padding:0; }
    .whp-fx li { display:flex; align-items:center; justify-content:space-between; gap:10px;
                 padding:9px 0; border-bottom:1px solid #f1f4f9; font-size:13px; }
    .whp-fx li:last-child { border-bottom:0; }
    .whp-fx-code { font-weight:700; }
    .whp-fx-rate { color:var(--muted); }

    /* Buy and sell, when a margin is set.
       The heading and the rows are separate grids, so their columns have to be
       declared the same. Left as `auto` each one sized to its own content and
       the labels sat off to one side of the figures they name. */
    .whp-fx-head,
    .whp-fx-pair li { display:grid; grid-template-columns:minmax(0,1fr) 76px 76px; gap:10px; }
    .whp-fx-head { padding:0 0 7px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
                   text-transform:uppercase; color:var(--faint); }
    .whp-fx-head span + span { text-align:right; }
    .whp-fx-pair li { align-items:baseline; }
    .whp-fx-buy, .whp-fx-sell { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
    .whp-fx-buy { color:var(--red); }
    .whp-fx-sell { color:var(--green); }

    .whp-promo { border-radius:13px; padding:20px;
                 background:linear-gradient(140deg,var(--navy),#1a3a66); color:#fff; }
    .whp-promo strong { display:block; font-size:15px; }
    .whp-promo p { margin:7px 0 12px !important; font-size:13px; color:#a9bbd8; }
    .whp-promo a { font-size:13px; font-weight:700; color:var(--gold); }

    .whp-notice { display:flex; align-items:center; gap:16px; margin-top:16px; padding:18px 20px;
                  border-radius:13px; background:#fff; border:1px solid var(--line); }
    .whp-notice-ico { display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
                      background:#eef3fb; color:var(--navy); flex:0 0 auto; }
    .whp-notice-txt strong { display:block; font-size:14.5px; }
    .whp-notice-txt em { font-size:13px; font-style:normal; color:var(--muted); }
    .whp-btn-ghost { margin-left:auto; padding:10px 18px; border:1px solid #d6dde9; border-radius:9px;
                     font-size:13px; font-weight:600; white-space:nowrap; }
    .whp-btn-ghost:hover { border-color:var(--gold); }

    .whp-tabs { display:none; }

    /* ---------- narrower desktops: the rail drops under the content ---------- */
    @media (max-width:1180px) {
        .whp-body { grid-template-columns:230px minmax(0,1fr); }
        .whp-rail { grid-column:2; padding:0 26px 26px; }
    }

    /* ---------- phone ---------- */
    @media (max-width:860px) {
        .whp-body { display:block; }
        .whp-sidecard { display:none; }   /* the sidebar is hidden on a phone anyway */
        .whp-side { display:none; }
        .whp-tagline { display:none; }
        .whp-exit { display:none; }

        .whp-top { padding:12px 16px; gap:12px; }
        .whp-wordmark { font-size:13px; letter-spacing:.14em; }

        /* the greeting keeps the dark band, so the first tile sits on navy the
           way the design has it */
        .whp-main { padding:0 0 26px; }
        .whp-hello { margin:0; padding:18px 16px 78px; background:var(--navy); color:#fff; }
        .whp-hello h1 { color:#fff; font-size:23px; }
        .whp-hello p { color:#a9bbd8; }
        .whp-when { color:#a9bbd8; }
        .whp-when .whp-i { color:#a9bbd8; }

        .whp-accounts { grid-template-columns:1fr 1fr; gap:12px; margin:-62px 16px 16px; }
        .whp-acct { padding:16px; }
        .whp-acct.is-open { grid-column:1 / -1; }
        .whp-acct-bal { font-size:21px; }
        .whp-acct-go { bottom:14px; right:14px; }

        .whp-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
                     margin:0 16px 16px; padding:16px 10px; border-radius:13px;
                     background:#fff; border:1px solid var(--line); }
        .whp-quick a { display:flex; flex-direction:column; align-items:center; gap:8px;
                       font-size:11.5px; line-height:1.25; text-align:center; color:var(--ink); }

        .whp-rail { padding:0 16px; }
        .whp-rail .whp-card:first-child { display:none; }   /* actions already shown above */
        .whp-main > .whp-card, .whp-ops, .whp-notice { margin-left:16px; margin-right:16px; }

        .whp-hide-sm { display:none !important; }
        .whp .whp-ops-table td { padding:12px 6px; }
        .whp-op-ico span { width:32px; height:32px; }

        .whp-notice { flex-wrap:wrap; background:var(--navy); border-color:transparent; }
        .whp-notice-ico { background:rgba(255,255,255,.12); color:#fff; }
        .whp-notice-txt strong { color:#fff; }
        .whp-notice-txt em { color:#a9bbd8; }
        .whp-btn-ghost { color:#fff; border-color:rgba(255,255,255,.35); }

        /* bottom bar, clear of the iOS home indicator */
        .whp-tabs { position:sticky; bottom:0; z-index:5; display:grid; grid-template-columns:repeat(5,1fr);
                    gap:2px; padding:9px 2px calc(9px + env(safe-area-inset-bottom));
                    background:#fff; border-top:1px solid var(--line); }
        /* five across is tight on a small phone, so the labels are allowed to
           shrink and clip rather than wrap onto a second line and shove the bar
           taller than the design allows */
        .whp-tabs > * { display:flex; flex-direction:column; align-items:center; gap:4px;
                        min-width:0; font-size:10.5px; line-height:1.2; text-align:center;
                        color:var(--muted); overflow:hidden; }
        .whp-tabs > * > :not(svg) { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .whp-tabs .is-active { color:var(--gold); font-weight:700; }
        body { padding-bottom:0; }
    }

    /* ---------- My card ---------- */
    .whp-mycard-head { display:flex; align-items:flex-start; justify-content:space-between;
                       gap:14px; margin-bottom:16px; }
    .whp-mycard-head h2 { font-size:16px; margin:0 0 4px; }
    .whp-mycard-num { margin:0; color:var(--muted); font-size:13.5px; letter-spacing:.09em; }

    /* the plastic keeps its own proportions whatever the artwork is */
    .whp-mycard-plastic { position:relative; display:block; max-width:420px; }
    .whp-mycard-plastic img { display:block; width:100%; height:auto; border-radius:14px; }
    .whp-mycard-plastic-num { position:absolute; left:7%; right:7%; top:var(--numy,60%);
                              display:flex; color:#fff; font-size:clamp(12px, 3.6vw, 17px);
                              letter-spacing:.14em; text-shadow:0 1px 3px rgba(0,0,0,.45);
                              pointer-events:none; }
    .whp-mycard-note { margin:14px 0 0; color:var(--muted); font-size:13px; }

    @media (max-width:860px) {
        .whp-mycard-plastic { max-width:none; }
    }

    @media (max-width:420px) {
        .whp-accounts { grid-template-columns:1fr; }
        .whp-hello h1 { font-size:21px; }
        /* at the narrowest the five labels would collide, so they go */
        .whp-tabs > * > :not(svg) { display:none; }
        .whp-tabs > * { gap:0; }
        .whp-tabs .whp-i { width:23px; height:23px; }
    }

/* ---------------------------------------------------------
   Views beyond the dashboard
   --------------------------------------------------------- */
.whp-page-head { margin-bottom:20px; }
.whp-page-head h1 { font-size:24px; }
.whp-page-head p { margin-top:5px !important; font-size:14px; color:var(--muted); }

.whp-detail { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px 26px; }
.whp-detail div { min-width:0; }
.whp-detail dt { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
.whp-detail dd { margin:4px 0 0; font-size:14px; word-break:break-all; }

.whp-stack { display:flex; flex-direction:column; gap:16px; }
.whp-sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px; }
.whp-sum div { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.whp-sum span { display:block; font-size:11.5px; font-weight:600; letter-spacing:.04em;
                text-transform:uppercase; color:var(--faint); }
.whp-sum strong { display:block; margin-top:6px; font-size:19px; font-variant-numeric:tabular-nums; }

.whp-filter { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:16px;
              background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.whp-filter label { display:block; font-size:11.5px; font-weight:600; letter-spacing:.04em;
                    text-transform:uppercase; color:var(--faint); margin-bottom:5px; }
.whp-filter select, .whp-filter input { padding:9px 12px; border:1px solid #d6dde9;
                                        border-radius:8px; font-size:14px; background:#fff; color:var(--ink); }
.whp .whp-btn, .whp a.whp-btn { display:inline-block; padding:10px 20px; border:0; border-radius:8px;
           background:var(--gold); color:var(--navy); font-size:14px; font-weight:700;
           line-height:1.2; text-align:center; cursor:pointer; text-decoration:none; }
.whp .whp-btn:hover, .whp a.whp-btn:hover { background:var(--gold-2); color:var(--navy); }
.whp .whp-btn-dark, .whp a.whp-btn-dark { background:var(--navy); color:#fff; }
.whp .whp-btn-dark:hover, .whp a.whp-btn-dark:hover { background:var(--navy-2); color:#fff; }

.whp-form { max-width:420px; }
.whp-form label { display:block; margin:14px 0 5px; font-size:11.5px; font-weight:600;
                  letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.whp-form input { width:100%; padding:11px 13px; border:1px solid #d6dde9; border-radius:8px;
                  font-size:15px; background:#fff; color:var(--ink); }
.whp-form .whp-pass input { padding-right:42px; }
.whp-form button { margin-top:20px; }
.whp-ok { margin-bottom:16px; padding:12px 16px; border-radius:9px;
          background:#eaf7f0; color:#0f6b4d; font-size:14px; }

/* pager, matching the admin's */
.whp-pager { display:flex; align-items:center; justify-content:space-between; gap:14px;
             flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.whp-pager-info { font-size:12.5px; color:var(--muted); }
.whp-pager-info strong { color:var(--ink); }
.whp-perpage { display:inline-flex; align-items:center; gap:8px; font-size:12px;
               font-weight:600; color:var(--muted); white-space:nowrap; }
.whp-perpage select { padding:6px 10px; border:1px solid #d6dde9; border-radius:8px;
                      font-size:13px; font-weight:700; color:var(--ink); background:#fff; }
.whp-pager-btns { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.whp .whp-page-btn { display:grid; place-items:center; min-width:32px; height:32px; padding:0 9px;
                     border:1px solid #dfe4ea; border-radius:8px; background:#fff; color:#4a5568;
                     font-size:12.5px; font-weight:600; text-decoration:none;
                     transition:background .15s, border-color .15s, color .15s; }
.whp .whp-page-btn:hover { background:#f2f5f9; border-color:#c3cbd6; color:var(--ink); }
.whp .whp-page-btn.is-active { background:var(--navy); border-color:var(--navy); color:#fff; }
.whp .whp-page-btn.is-off { opacity:.4; pointer-events:none; }
.whp-page-gap { color:#b0b8c4; padding:0 2px; font-size:12px; }

.whp-help a { color:var(--link); font-weight:600; }
.whp-help li { margin-bottom:8px; font-size:14px; }

@media (max-width:860px) {
    .whp-page-head, .whp-sum, .whp-filter, .whp-stack > * { margin-left:16px; margin-right:16px; }
    /* a page-size chooser is desk furniture; the phone just pages */
    .whp-perpage { display:none; }
    .whp-pager { justify-content:center; text-align:center; }
    .whp-page-head { padding-top:18px; }
    .whp-filter { flex-direction:column; align-items:stretch; }
    .whp-filter select, .whp-filter input, .whp-filter .whp-btn { width:100%; }
}


/* ---------------------------------------------------------
   Right to left

   Only the things that carry meaning from their side are flipped: the sidebar
   moves, rows reverse, and figures keep their own direction so an amount is
   never read backwards. Latin account numbers and codes stay left to right
   inside an otherwise right-to-left page.
   --------------------------------------------------------- */
.whp[dir="rtl"] { text-align:right; }
.whp[dir="rtl"] .whp-top-brand { order:0; }
.whp[dir="rtl"] .whp-tagline { padding-left:0; padding-right:22px;
                               border-left:0; border-right:1px solid rgba(255,255,255,.16); }
.whp[dir="rtl"] .whp-top-right { margin-left:0; margin-right:auto; }

.whp[dir="rtl"] .whp-nav-item { border-left:0; border-right:3px solid transparent; }
.whp[dir="rtl"] .whp-nav-item.is-active { border-right-color:var(--gold); }

.whp[dir="rtl"] .whp-acct-go { right:auto; left:18px; transform:scaleX(-1); }
.whp[dir="rtl"] .whp-when { text-align:left; }

.whp[dir="rtl"] .whp-ops-table th,
.whp[dir="rtl"] .whp-ops-table td { text-align:right; }
.whp[dir="rtl"] .whp-r { text-align:left; }
.whp[dir="rtl"] .whp-op-ico { padding-right:0 !important; padding-left:0 !important; }

/* numbers, account numbers and references are read the same way in any language */
.whp[dir="rtl"] .whp-acct-bal,
.whp[dir="rtl"] .whp-acct-id em,
.whp[dir="rtl"] .whp-op-date,
.whp[dir="rtl"] .whp-r,
.whp[dir="rtl"] .whp-sum strong,
.whp[dir="rtl"] .whp-detail dd,
.whp[dir="rtl"] .whp-pager-info { direction:ltr; unicode-bidi:isolate; }
.whp[dir="rtl"] .whp-acct-bal,
.whp[dir="rtl"] .whp-sum strong { display:block; text-align:right; }
.whp[dir="rtl"] .whp-r { text-align:left; }

/* the rate columns mirror with the rest of the page, figures still ltr */
.whp[dir="rtl"] .whp-fx-head span + span,
.whp[dir="rtl"] .whp-fx-buy,
.whp[dir="rtl"] .whp-fx-sell { text-align:left; }
.whp[dir="rtl"] .whp-fx-buy,
.whp[dir="rtl"] .whp-fx-sell { direction:ltr; unicode-bidi:isolate; }

.whp[dir="rtl"] .whp-btn-ghost { margin-left:0; margin-right:auto; }
.whp[dir="rtl"] .whp-main.is-leaving { transform:translate3d(0,6px,0); }

@media (max-width:860px) {
    .whp[dir="rtl"] .whp-page-head,
    .whp[dir="rtl"] .whp-sum,
    .whp[dir="rtl"] .whp-filter { text-align:right; }
}


/* motion is decoration here; anyone who has asked for less gets none of it */
@media (prefers-reduced-motion: reduce) {
    .whp-plastic, .whp-sidecard-plastic { transition:none !important; transform:none !important; }
    .whp-sidecard-plastic { transform:rotate(-7deg) !important; }
    .whp-plastic::after { display:none; }
}


/* ---------------------------------------------------------
   Signed in, not yet open

   The fogged layer holds no real figures — it is a stand-in, so the blur is
   only telling the holder what they are waiting for, not hiding anything that
   an inspector would give away.
   --------------------------------------------------------- */
.whp-waiting .whp-main { position:relative; min-height:560px; }
.whp-waiting .whp-fog { filter:blur(7px) saturate(.6); opacity:.5; pointer-events:none;
                        user-select:none; transform:scale(1.01); }
.whp-waiting .whp-nav-item { opacity:.45; }
.whp-waiting .whp-acct { display:block; }

.whp-waitcard { position:absolute; inset:0; display:flex; flex-direction:column;
                align-items:center; justify-content:center; text-align:center;
                padding:32px 24px; }
.whp-waitcard > * { max-width:420px; }
.whp-waitcard-ico { display:grid; place-items:center; width:62px; height:62px; margin-bottom:18px;
                    border-radius:50%; background:var(--navy); color:var(--gold); }
.whp-waitcard-ico .whp-i { width:28px; height:28px; }
.whp-waitcard h2 { font-size:22px; margin:0 0 10px; }
.whp-waitcard p { font-size:15px; line-height:1.6; color:var(--muted); margin:0 0 6px !important; }
.whp-waitcard-by { font-size:12.5px !important; color:var(--faint) !important;
                   letter-spacing:.04em; text-transform:uppercase; margin-top:14px !important; }
.whp .whp-waitcard-out { display:inline-block; margin-top:20px; padding:11px 26px;
                         border:1px solid #d6dde9; border-radius:9px;
                         font-size:14px; font-weight:600; color:var(--ink); background:#fff; }
.whp .whp-waitcard-out:hover { border-color:var(--gold); }

@media (prefers-reduced-motion: reduce) { .whp-waiting .whp-fog { transform:none; } }
@media (max-width:860px) {
    .whp-waiting .whp-fog { padding:0 16px; }
    .whp-waitcard { padding:24px 16px; }
}

/* ---------------------------------------------------------
   My card: frost, details and the two controls
   --------------------------------------------------------- */

.whp-mycard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.whp-frozen-tag { flex:0 0 auto; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700;
                  letter-spacing:.04em; text-transform:uppercase; background:#e8f1fb; color:#1d4ed8; }

.whp-mycard-plastic { position:relative; }

/* the card under ice: a white wash and a fine crystal pattern over the art,
   which is the same plastic the holder sees when it is live */
.whp-frost { position:absolute; inset:0; border-radius:inherit; pointer-events:none;
             background:
               radial-gradient(circle at 18% 22%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,0) 32%),
               radial-gradient(circle at 74% 30%, rgba(255,255,255,.9) 0 6%, rgba(255,255,255,0) 28%),
               radial-gradient(circle at 42% 78%, rgba(255,255,255,.9) 0 7%, rgba(255,255,255,0) 30%),
               repeating-linear-gradient(62deg, rgba(255,255,255,.55) 0 2px, rgba(255,255,255,0) 2px 9px),
               repeating-linear-gradient(-48deg, rgba(255,255,255,.45) 0 2px, rgba(255,255,255,0) 2px 11px),
               linear-gradient(140deg, rgba(240,247,255,.86), rgba(255,255,255,.92));
             backdrop-filter:blur(3px) saturate(.35) brightness(1.18);
             -webkit-backdrop-filter:blur(3px) saturate(.35) brightness(1.18); }

.whp-frost-ico { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
                 font-size:34px; color:rgba(29,78,216,.35); text-shadow:0 1px 0 rgba(255,255,255,.8); }

.whp-mycard.is-frozen .whp-mycard-plastic-num { opacity:.35; }

/* `hidden` is an attribute, and these all carry a display rule of their own —
   which would otherwise win, leaving a snowflake on a live card and the masked
   number printed under its own details */
.whp-mycard [hidden],
.whp-card-details[hidden] { display:none !important; }

/* the details, laid over the plastic as they are on a phone */
.whp-card-details { position:absolute; inset:auto 0 0 0; padding:14px 16px; border-radius:inherit;
                    background:linear-gradient(0deg, rgba(8,20,40,.88), rgba(8,20,40,.55) 70%, rgba(8,20,40,0));
                    color:#fff; }
.whp-cd-lbl { display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; opacity:.75; }
.whp-cd-name { display:block; margin:2px 0 8px; font-size:14px; letter-spacing:.08em; text-transform:uppercase; }
.whp-cd-pan { display:block; margin:2px 0 8px; font-size:17px; letter-spacing:.06em;
              font-variant-numeric:tabular-nums; }
.whp-cd-row { display:flex; gap:26px; }
.whp-cd-row strong { font-size:14px; font-variant-numeric:tabular-nums; }

.whp-card-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.whp-card-actions form { margin:0; }
.whp-cardbtn { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
               border:1px solid var(--line); background:#fff; color:var(--navy); font:inherit; font-size:13px;
               font-weight:600; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.whp-cardbtn:hover { border-color:var(--navy); }
.whp-cardbtn[disabled] { opacity:.45; cursor:not-allowed; }
.whp-cardbtn.is-on { background:#eaf1ff; border-color:#c7d7fe; color:#1d4ed8; }
/* the site theme paints clicked buttons yellow: the card buttons keep their own colours */
.whp .whp-cardbtn:hover, .whp .whp-cardbtn:focus, .whp .whp-cardbtn:active { background:#fff; color:var(--navy); box-shadow:none; border-radius:999px; }
.whp .whp-cardbtn.is-on:hover, .whp .whp-cardbtn.is-on:focus, .whp .whp-cardbtn.is-on:active { background:#eaf1ff; color:#1d4ed8; }
.whp-cardbtn-ico { font-size:14px; line-height:1; }

@media (max-width:480px) {
    .whp-cd-pan { font-size:15px; letter-spacing:.04em; }
    .whp-card-actions .whp-cardbtn { flex:1 1 auto; justify-content:center; }
}

/* ---------------------------------------------------------
   The bell: what the bank has told this holder
   --------------------------------------------------------- */

.whp-bell-wrap { position:relative; }
/* A bare <button> is the theme's to paint, and Astra fills it with the brand
   colour on hover and focus — which turned the whole bell into a gold disc.
   It holds its own look in every state: transparent, gold mark, thin ring. */
.whp-bell,
.whp-bell:hover,
.whp-bell:focus,
.whp-bell:active,
.whp-bell:focus-visible {
    position:relative; display:grid; place-items:center; width:38px; height:38px; padding:0;
    border:1px solid rgba(255,255,255,.18) !important; border-radius:50%;
    background:transparent !important; box-shadow:none !important; outline:none;
    color:var(--gold) !important; line-height:1; cursor:pointer;
    transition:border-color .15s, transform .15s;
}
.whp-bell:hover { border-color:rgba(255,255,255,.38) !important; }
.whp-bell:active { transform:scale(.94); }
.whp-bell-ico { display:grid; place-items:center; }
.whp-bell-ico svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7;
                    stroke-linecap:round; stroke-linejoin:round; }
.whp-bell-count { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
                  display:grid; place-items:center; border-radius:999px; background:var(--gold); color:#20160a;
                  font-size:10.5px; font-weight:800; }
.whp-bell-panel { position:absolute; top:calc(100% + 10px); right:0; z-index:40; width:min(340px, 88vw);
                  max-height:min(420px, 70vh); overflow:auto; border:1px solid var(--line); border-radius:12px;
                  background:#fff; color:var(--ink); box-shadow:0 18px 44px rgba(9,20,40,.24); }
.whp-bell-head { padding:11px 14px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700;
                 letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.whp-bell-item { padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.5; }
.whp-bell-item:last-child { border-bottom:0; }
.whp-bell-item.is-unread { background:#f5f9ff; }
.whp-bell-item p { margin:0 0 6px; }
.whp-bell-item a { color:var(--link); }
.whp-bell-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.whp-bell-when { font-size:11px; color:var(--faint); }
.whp-bell-del,
.whp-bell-del:hover,
.whp-bell-del:focus,
.whp-bell-del:active { padding:0 4px; border:0 !important; border-radius:6px; background:transparent !important;
                       box-shadow:none !important; color:var(--faint) !important; font-size:16px; line-height:1;
                       cursor:pointer; }
.whp-bell-del:hover { color:var(--red) !important; }
.whp-bell-empty { margin:0; padding:16px 14px; font-size:13px; color:var(--muted); }
.whp-bell-panel[hidden] { display:none !important; }
.whp-bell-count[hidden] { display:none !important; }

[dir="rtl"] .whp-bell-panel { right:auto; left:0; }

/* keeping the session on this device */
.whp-remember { display:flex; align-items:center; gap:8px; margin:-4px 0 14px; font-size:13px; color:var(--muted);
                cursor:pointer; }
.whp-remember input { width:16px; height:16px; margin:0; accent-color:var(--navy); }

/* ---------------------------------------------------------
   Request · Send · Transfer — three round buttons under the accounts
   --------------------------------------------------------- */

.whp-moves { display:flex; justify-content:center; gap:34px; margin:6px 0 22px; }
.whp-move,
.whp-move:hover,
.whp-move:focus,
.whp-move:active { display:flex; flex-direction:column; align-items:center; gap:8px; padding:0;
                   border:0 !important; background:transparent !important; box-shadow:none !important;
                   color:var(--ink) !important; font:inherit; cursor:pointer; text-decoration:none !important; }
.whp-move-ico { display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
                border:1.5px solid var(--navy);
                background:linear-gradient(140deg, var(--navy), var(--navy-2)); color:#fff;
                box-shadow:0 8px 18px rgba(14,28,56,.18);
                transition:transform .15s, box-shadow .15s, background .15s, color .15s; }
.whp-move-ico svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.6;
                    stroke-linecap:round; stroke-linejoin:round; }

/* on hover and while pressed the colours swap: a white button, a navy arrow */
.whp-move:hover .whp-move-ico,
.whp-move:focus-visible .whp-move-ico,
.whp-move:active .whp-move-ico,
.whp-move.is-active .whp-move-ico { background:#fff; color:var(--navy); }
.whp-move:hover .whp-move-ico { transform:translateY(-2px); box-shadow:0 12px 22px rgba(14,28,56,.24); }
.whp-move:active .whp-move-ico { transform:scale(.95); }
.whp-move-lbl { font-size:13px; font-weight:600; }

@media (max-width:480px) {
    .whp-moves { gap:22px; }
    .whp-move-ico { width:50px; height:50px; }
}

/* ---------------------------------------------------------
   The exchange dialog
   --------------------------------------------------------- */

.whp-xch { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px;
          background:rgba(9,20,40,.55); }
.whp-xch[hidden] { display:none !important; }
.whp-xch-box { width:min(440px, 100%); max-height:92vh; overflow:auto; padding:22px 22px 20px;
              border-radius:16px; background:#fff; color:var(--ink); box-shadow:0 30px 70px rgba(9,20,40,.35); }
.whp-xch-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.whp-xch-head h2 { margin:0; font-size:19px; }
.whp-xch-x, .whp-xch-x:hover, .whp-xch-x:focus { border:0 !important; background:transparent !important; box-shadow:none !important;
          color:var(--muted) !important; font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.whp-xch-lbl { display:block; margin:12px 0 5px; font-size:12px; font-weight:700; letter-spacing:.04em;
              text-transform:uppercase; color:var(--muted); }
.whp-xch-in { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font:inherit;
             font-size:14px; color:var(--ink); background:#fff; box-sizing:border-box; }
.whp-xch-amt { position:relative; }
.whp-xch-amt input { padding-right:56px; font-size:18px; font-weight:700; text-align:right; }
.whp-xch-amt span { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px;
                   font-weight:700; color:var(--muted); }
.whp-xch-quote { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:14px 0 4px;
                padding:12px 14px; border-radius:10px; background:#f5f8fc; }
.whp-xch-quote span { font-size:12.5px; color:var(--muted); }
.whp-xch-quote strong { font-size:17px; color:var(--navy); }
.whp-xch-msg { margin:10px 0 0; font-size:13px; color:var(--red); }
.whp-xch-msg.is-ok { color:var(--green); }
.whp-xch-msg[hidden] { display:none !important; }
.whp-xch-note { margin:6px 0 0; font-size:14px; color:var(--muted); }
/* the same look as the round Request / Send buttons: navy with white, and the
   colours swap to white with navy on hover and while pressed */
.whp-xch-go { width:100%; margin-top:16px; padding:13px; border:1.5px solid var(--navy) !important; border-radius:999px;
              background:linear-gradient(140deg, var(--navy), var(--navy-2)) !important; color:#fff !important;
              font:inherit; font-weight:800; font-size:14px; letter-spacing:.02em; cursor:pointer;
              box-shadow:0 8px 18px rgba(14,28,56,.18) !important; transition:background .15s, color .15s, transform .15s; }
.whp-xch-go:hover,
.whp-xch-go:focus-visible,
.whp-xch-go:active { background:#fff !important; color:var(--navy) !important; }
.whp-xch-go:active { transform:scale(.98); }
.whp-xch-go[disabled] { opacity:.55; cursor:default; transform:none; }

/* the result */
.whp-xch-done[hidden], #whp-xch-form[hidden] { display:none !important; }
.whp-xch-ok { margin:0 0 12px; font-size:13.5px; color:var(--green); font-weight:600; }
.whp-xch-legs { display:grid; gap:10px; }
.whp-xch-leg { padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#fafbfd; }
.whp-xch-leg-head { font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.whp-xch-leg-amt { margin:4px 0 2px; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.whp-xch-leg.is-out .whp-xch-leg-amt { color:var(--red); }
.whp-xch-leg.is-in  .whp-xch-leg-amt { color:var(--green); }
.whp-xch-leg-bal { font-size:12.5px; color:var(--ink); }

/* Send — reuses the exchange modal; only the account number field differs */
.whp-snd-iban { font-variant-numeric:tabular-nums; letter-spacing:.06em; text-transform:uppercase; }
#whp-snd .whp-xch-lbl:first-of-type { margin-top:4px; }
.whp-xch-msg.is-info { color:var(--navy); }

/* Frozen: the real dashboard, blurred and out of reach, under the bank's message */
.whp-frozen-under { filter:blur(6px) saturate(.7); pointer-events:none; user-select:none; }
/* the account-frozen overlay only — the card's Freeze button shares the class name */
.whp.whp-freeze { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:16px;
    background:rgba(14,28,56,.28); }
.whp-freeze-box { text-align:center; width:min(480px, 100%); padding:28px 26px 22px; }
.whp-freeze-ico { display:inline-grid; place-items:center; width:54px; height:54px; margin-bottom:10px;
    border-radius:50%; background:#eef2f8; color:var(--navy); }
.whp-freeze-box h2 { margin:0 0 10px; font-size:20px; color:var(--navy); }
.whp-freeze-msg { font-size:14.5px; line-height:1.6; color:var(--ink); text-align:start; }
.whp-freeze-msg p { margin:0 0 10px; }
.whp-freeze-msg a { color:var(--link); }
.whp-freeze-msg ul { margin:0 0 10px; padding-inline-start:20px; }
.whp .whp-freeze-out { display:block; text-decoration:none !important; text-align:center; }

/* Contact the bank — the conversation on Help & Contact */
.whp-sup { margin-bottom:18px; }
.whp-sup .whp-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.whp-sup .whp-card-head h2 { margin:0; font-size:17px; }
.whp .whp-sup-open { padding:10px 18px; border:1.5px solid var(--navy) !important; border-radius:999px; background:var(--navy) !important;
    color:#fff !important; font:inherit; font-weight:700; font-size:14px; cursor:pointer; }
.whp .whp-sup-open:hover { background:#fff !important; color:var(--navy) !important; }
.whp-sup-thread { max-height:420px; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:12px;
    background:var(--page); border-radius:11px; }
.whp .bat-sup-msg { display:flex; flex-direction:column; max-width:82%; }
.whp .bat-sup-msg.is-mine { align-self:flex-end; align-items:flex-end; }
.whp .bat-sup-msg.is-theirs { align-self:flex-start; }
.whp .bat-sup-bubble { padding:9px 13px; border-radius:13px; font-size:14px; line-height:1.5; background:#fff; border:1px solid var(--line); color:var(--ink); }
.whp .bat-sup-msg.is-mine .bat-sup-bubble { background:var(--navy); color:#fff; border-color:var(--navy); }
.whp .bat-sup-bubble p { margin:0 0 6px; } .whp .bat-sup-bubble p:last-child { margin:0; }
.whp .bat-sup-bubble a { color:var(--link); } .whp .bat-sup-msg.is-mine .bat-sup-bubble a { color:#cfe0ff; }
.whp .bat-sup-meta { font-size:11.5px; color:var(--muted); margin-top:3px; }
.whp .bat-sup-empty { margin:18px auto; color:var(--muted); font-size:14px; text-align:center; }
.whp textarea.whp-sup-text { resize:vertical; min-height:120px; }

/* Help & Contact — Contact the bank / Message from the bank */
.whp-sup-btns { display:flex; gap:10px; flex-wrap:wrap; }
.whp .whp-sup-inbox { position:relative; padding:10px 18px; border:1.5px solid var(--gold) !important; border-radius:999px;
    background:var(--gold) !important; color:var(--navy) !important; font:inherit; font-weight:700; font-size:14px; cursor:pointer;
    animation:whpSupPulse 2s ease-in-out infinite; }
.whp .whp-sup-inbox:hover { background:#fff !important; }
.whp-sup-count { display:inline-block; min-width:20px; margin-inline-start:6px; padding:0 6px; border-radius:999px;
    background:var(--red); color:#fff; font-size:12px; line-height:20px; text-align:center; }
@keyframes whpSupPulse { 0%,100% { box-shadow:0 0 0 0 rgba(242,178,28,.45); } 50% { box-shadow:0 0 0 7px rgba(242,178,28,0); } }
@media (prefers-reduced-motion: reduce) { .whp .whp-sup-inbox { animation:none; } }
.whp-sup-note { margin:0; color:var(--muted); font-size:14px; }
.whp-sup-inlist { display:flex; flex-direction:column; gap:10px; max-height:42vh; overflow:auto; margin:4px 0 6px; }
.whp-sup-inmsg { padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--page); }
.whp-sup-inbody { font-size:14.5px; line-height:1.55; color:var(--ink); }
.whp-sup-inbody p { margin:0 0 8px; } .whp-sup-inbody p:last-child { margin:0; }
.whp-sup-inbody a { color:var(--link); }
.whp-sup-inwhen { margin-top:6px; font-size:12px; color:var(--muted); }


/* ---------------------------------------------------------
   Send & Request — the result and the recent list
   --------------------------------------------------------- */
#whp-snd-form[hidden], #whp-req-form[hidden] { display:none !important; }
#whp-snd-done .whp-xch-ok, #whp-req-done .whp-xch-ok { color:var(--navy); line-height:1.5; }
.whp-sr-hist:empty { display:none; }
.whp-sr-hist { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.whp-sr-h { margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.whp-sr-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.whp-sr-list li { display:flex; justify-content:space-between; align-items:center; gap:10px;
                  padding:10px 12px; border-radius:10px; background:#f7f9fc; }
.whp-sr-who { display:flex; flex-direction:column; min-width:0; }
.whp-sr-who strong { font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.whp-sr-who small { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.whp-sr-amt { display:flex; flex-direction:column; align-items:flex-end; font-weight:700; font-size:13.5px;
              font-variant-numeric:tabular-nums; white-space:nowrap; }
.whp-sr-st { font-style:normal; margin-top:3px; padding:1px 8px; border-radius:999px; font-size:10.5px;
             font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.whp-sr-st.is-pending  { background:#fdf5e2; color:#8a6a10; }
.whp-sr-st.is-approved { background:#e6f6ee; color:var(--green); }
.whp-sr-st.is-rejected { background:#fdecea; color:var(--red); }
[dir="rtl"] .whp-sr-amt { align-items:flex-start; }

.whp-sr-reason[hidden] { display:none !important; }

.whp-sr-h { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.whp-sr-toggle, .whp-sr-toggle:hover, .whp-sr-toggle:focus { padding:3px 11px !important; border:1px solid var(--navy) !important; border-radius:999px;
    background:#fff !important; color:var(--navy) !important; font:inherit; font-size:11px; font-weight:700; letter-spacing:.03em;
    text-transform:uppercase; cursor:pointer; box-shadow:none !important; line-height:1.4; }
.whp-sr-toggle:hover { background:var(--navy) !important; color:#fff !important; }
.whp-sr-list[hidden] { display:none !important; }

/* the sign-in message sits inside the card, above the first field */
.whp .whp-in-card { margin:18px 0 6px; line-height:1.45; }

/* My profile — change email */
#whp-em-step1[hidden], #whp-em-step2[hidden], .whp-em-msg[hidden] { display:none !important; }
.whp .whp-em-info { margin:4px 0 2px; font-size:13.5px; color:var(--navy); line-height:1.5; }
.whp .whp-em-msg { margin:12px 0 0; padding:10px 14px; border-radius:9px; background:#fdecea; color:var(--red); font-size:13.5px; }
.whp .whp-em-msg.is-ok { background:#e6f6ee; color:var(--green); }
.whp-em-code { letter-spacing:.35em; font-size:18px !important; font-weight:700; text-align:center; }
.whp-em-back, .whp-em-back:hover, .whp-em-back:focus { display:inline-block; margin:10px 0 0 10px; padding:0; border:0 !important;
    background:transparent !important; color:var(--link) !important; font:inherit; font-size:13px; cursor:pointer; box-shadow:none !important; }

/* View statement: white with navy, between Show and Download */
.whp .whp-btn-view, .whp a.whp-btn-view { background:#fff; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy); }
.whp .whp-btn-view:hover, .whp a.whp-btn-view:hover { background:var(--navy); color:#fff; }