/* Money Flows: one existing sheet, appearance from the supplied Add money board. */
#sh-move {box-sizing:border-box;width:100%;height:738px;max-height:calc(100% - 135px);padding:0;overflow:hidden;background:linear-gradient(165deg,#fafbfb 0%,#dce9ea 53%,#bdd5d7 100%);border-radius:20px 20px 0 0;color:#122936;font-family:inherit;transition:transform var(--t-sheet) var(--ease-ios);}
/* Height only animates once the sheet has ALREADY arrived. On the opening frame
   the box would otherwise grow 560→738 while it slides up, which reads as the
   sheet overshooting to three-quarter height and then settling back. */
#sh-move.settled{transition:transform var(--t-sheet) var(--ease-ios),height calc(300ms * var(--speed)) var(--ease-ios);}
/* During confirm the sheet is hidden behind the green flood, so it snaps to the
   success height instantly. The bubble's landing spot is then measured against a
   settled layout instead of a moving one. */
#sh-move.mf-confirming,#sh-move.mf-confirming.settled{transition:transform var(--t-sheet) var(--ease-ios)!important;}
#sh-move[data-mf-page="amount"]{height:738px;max-height:calc(100% - 135px)}
#sh-move[data-mf-page="success"]{height:330px}
#sh-move:not([data-mf-page="entry"]):not([data-mf-page="amount"]):not([data-mf-page="success"]){height:560px;max-height:calc(100% - 135px)}
#sh-move[data-mf-page="methods"],#sh-move[data-mf-page="apple"]{height:440px!important}
#sh-move[data-mf-page="card"]{height:500px!important}
#sh-move[data-mf-page="destination"],#sh-move[data-mf-page="bank"]{height:655px!important}
#sh-move[data-mf-page="contact"],#sh-move[data-mf-page="recipient"]{height:640px!important}
#sh-move .step,#money-flow-content{height:100%}
#money-flow-content{position:relative;overflow:hidden}
#sh-move .mf-screen{height:100%;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}
#sh-move .mf-screen.mf-exit{position:absolute;inset:0;z-index:1;width:100%;pointer-events:none;will-change:transform,opacity}
#sh-move .mf-screen.mf-enter{position:relative;z-index:2;opacity:.55;will-change:transform,opacity}
#sh-move .mf-screen.mf-forward.mf-enter{transform:translateX(8px)}
#sh-move .mf-screen.mf-backward.mf-enter{transform:translateX(-8px)}
#sh-move .mf-screen.mf-forward.mf-exit-active{transform:translateX(-4px);opacity:0;transition:transform calc(80ms * var(--speed)) var(--ease-state),opacity calc(80ms * var(--speed)) var(--ease-state)}
#sh-move .mf-screen.mf-backward.mf-exit-active{transform:translateX(4px);opacity:0;transition:transform calc(80ms * var(--speed)) var(--ease-state),opacity calc(80ms * var(--speed)) var(--ease-state)}
#sh-move .mf-screen.mf-forward.mf-enter-active,#sh-move .mf-screen.mf-backward.mf-enter-active{transform:translateX(0);opacity:1;transition:transform calc(160ms * var(--speed)) var(--ease-ios),opacity calc(160ms * var(--speed)) var(--ease-state)}
.reduced #sh-move,.reduced #sh-move .mf-screen, #sh-move .mf-screen.mf-reduced{transition:none!important}
@media (prefers-reduced-motion: reduce){#sh-move,#sh-move .mf-screen{transition:none!important}}
#money-flow-content button,#money-flow-content input,#money-flow-content textarea{font:inherit}
#money-flow-content button{cursor:pointer}
#sh-move .mf-header{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:rgba(255,255,255,.54);border-bottom:1px solid rgba(40,67,80,.08)}
#sh-move .mf-heading{text-align:center;font-size:17px;line-height:1.1;letter-spacing:-.025em;font-weight:400}
#sh-move .mf-heading small{display:block;margin-top:3px;font-size:11px;letter-spacing:0;color:#728696}
#sh-move .mf-round{width:36px;height:36px;flex:none;border:0;border-radius:50%;background:rgba(255,255,255,.75);color:#18323e;font-size:23px;line-height:1}
#sh-move .mf-back{font-size:22px}
#sh-move .mf-hidden{visibility:hidden}
#sh-move .mf-tabs{display:flex;gap:4px;padding:8px 14px 7px;flex:none;border-bottom:1px solid rgba(40,67,80,.07)}
#sh-move .mf-tabs button{flex:1;height:32px;border:0;border-radius:20px;background:rgba(255,255,255,.35);color:#5c7180;font-size:11px;white-space:nowrap}
#sh-move .mf-tabs button.active{background:#fff;color:#122936;box-shadow:0 1px 4px rgba(27,59,71,.09)}
#sh-move .mf-account{min-height:79px;box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:8px 14px;flex:none;border-bottom:1px solid rgba(40,67,80,.08)}
#sh-move .mf-account-icon,#sh-move .mf-row-icon{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(52,80,92,.1);font-size:17px;color:#203942}
#sh-move .mf-account-copy{min-width:0;display:flex;flex-direction:column;line-height:1.1;gap:2px}
#sh-move .mf-account-copy small{font-size:10px;color:#8294a1}
#sh-move .mf-account-copy b{font-size:14px;font-weight:400}
#sh-move .mf-account-copy span,#sh-move .mf-account-copy a{font-size:11px;color:#617a89}
#sh-move .mf-account-copy a{color:#122936;cursor:pointer}
#sh-move .mf-account>button{margin-left:auto;border:0;background:#fff;border-radius:20px;padding:7px 12px;font-size:12px;color:#213643}
#sh-move .mf-main{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;padding:8px 14px 12px}
#sh-move .mf-amount{display:block;width:100%;margin:auto 0 8px;border:0;background:transparent;color:#112a38;text-align:center;font-size:40px;letter-spacing:-.04em;line-height:1.1;font-weight:400}
#sh-move .mf-muted-currency{color:#afbec8}
#sh-move .mf-amount small{display:block;margin-top:4px;font-size:12px;letter-spacing:0;color:#708596}
#sh-move .mf-presets{display:flex;width:100%;gap:5px;margin:0 0 14px}
#sh-move .mf-presets button{flex:1;height:36px;min-width:0;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:rgba(255,255,255,.13);font-size:13px;color:#1b3440}
#sh-move .mf-action{display:block;flex:none;width:100%;min-height:52px;border:0;border-radius:28px;background:#fff;color:#142b38;font-size:14px;text-align:center}
#sh-move .mf-action:disabled{color:#a6b6bf;background:rgba(255,255,255,.43);cursor:default}
#sh-move .mf-link{height:29px;border:0;background:transparent;font-size:12px;color:#263f4c}
#sh-move .mf-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:7px 8px 28px;background:#e5e6e9;flex:none}
#sh-move .mf-pad button{height:46px;border:0;border-radius:8px;background:#fff;color:#42464b;font-size:23px;font-weight:400}
#sh-move .mf-pad button:active{background:#dce9ea}
#sh-move .mf-list{padding:12px 14px 0;flex:none}
#sh-move .mf-list p,#sh-move .mf-caption{margin:0 0 8px;font-size:11px;color:#536979}
#sh-move .mf-row{width:100%;min-height:62px;display:flex;align-items:center;gap:10px;text-align:left;border:0;border-bottom:1px solid rgba(40,67,80,.09);background:rgba(255,255,255,.45);padding:7px 12px;color:#152e3c}
#sh-move .mf-row:first-of-type{border-radius:10px 10px 0 0}
#sh-move .mf-row:last-of-type{border-radius:0 0 10px 10px;border-bottom:0}
#sh-move .mf-row>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}
#sh-move .mf-row b{font-weight:400;font-size:14px}
#sh-move .mf-row small{font-size:11px;color:#688294}
#sh-move .mf-row i{font-style:normal;margin-left:auto;color:#698496;font-size:20px}
#sh-move .mf-row-icon.mf-apple{background:#000;color:#fff}
#sh-move .mf-row-icon.mf-visa{background:#1434cb;color:#fff;font-size:10px;font-weight:700;font-style:italic}
#sh-move .mf-method-list{margin-top:2px}
#sh-move .mf-pair .mf-account{min-height:65px}
#sh-move .mf-pair-arrow{text-align:center;color:#6a8190;font-size:17px;line-height:14px}
#sh-move .mf-recipient{width:calc(100% - 28px);margin:10px 14px 0;padding:13px 16px;border:0;border-radius:12px;background:rgba(255,255,255,.6);text-align:left;color:#18313d}
#sh-move .mf-recipient span{float:right}
#sh-move .mf-review-body{padding:16px 14px;flex:1}
#sh-move .mf-apple-mark{width:50px;height:50px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;margin:2px auto 8px;font-size:29px}
#sh-move .mf-auth{text-align:center;font-size:13px;margin:8px 0 17px}
#sh-move .mf-summary{border-radius:11px;overflow:hidden;background:rgba(255,255,255,.43)}
#sh-move .mf-summary>div{display:flex;justify-content:space-between;gap:10px;padding:13px 15px;border-bottom:1px solid rgba(54,76,85,.08);font-size:12px}
#sh-move .mf-summary>div:last-child{border:0}
#sh-move .mf-summary span{color:#688194}
#sh-move .mf-summary b{font-weight:400}
#sh-move .mf-summary .mf-green,#sh-move .mf-green{color:#27bb81}
#sh-move .mf-bottom{width:calc(100% - 28px);margin:auto 14px 24px}
#sh-move .mf-slide{position:relative;box-sizing:border-box;height:56px;display:flex;align-items:center;justify-content:center;border:1px solid #fff;background:rgba(255,255,255,.32);color:#698194;user-select:none}
#sh-move .mf-slide-label{font-size:13px;pointer-events:none}
#sh-move .mf-slide-handle{position:absolute;left:3px;top:3px;width:48px;height:48px;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:linear-gradient(145deg,#fff,#b8d8d1);display:grid;place-items:center;color:#13303b;font-size:23px;box-shadow:0 1px 5px rgba(24,61,64,.2);cursor:grab;touch-action:none;transform:translateX(var(--slide-x,0px));transition:transform 220ms cubic-bezier(.2,.75,.2,1)}
#sh-move .mf-slide.is-dragging .mf-slide-handle{cursor:grabbing;transition:none}
#sh-move .mf-slide-handle:focus-visible{outline:2px solid #168d70;outline-offset:2px}
#sh-move .mf-secondary{display:block;width:100%;margin:8px 0 16px;border:1px solid #fff;border-radius:25px;padding:11px;background:rgba(255,255,255,.3);color:#18313d;font-size:12px}
#sh-move .mf-form{padding:17px 14px;display:flex;flex-direction:column;gap:14px}
#sh-move .mf-form label,#sh-move .mf-note-label{font-size:11px;color:#253d49}
#sh-move .mf-form label input:not([type=checkbox]),#sh-move .mf-note-label textarea,#sh-move .mf-search{box-sizing:border-box;display:block;width:100%;margin-top:6px;padding:14px;border:1px solid #fff;border-radius:14px;background:rgba(255,255,255,.65);outline:none;color:#18313d;font-size:13px}
#sh-move .mf-form>div{display:flex;gap:10px}
#sh-move .mf-form>div label{flex:1}
#sh-move .mf-form .mf-check{font-size:13px}
#sh-move .mf-bank{margin:18px 14px 12px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.5)}
#sh-move .mf-bank>div{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(54,76,85,.08);font-size:12px}
#sh-move .mf-bank span{color:#708798}
#sh-move .mf-bank-note{margin:0 14px;padding:12px;background:rgba(33,185,128,.08);border-radius:10px;color:#25ad7d;font-size:11px}
#sh-move .mf-note-label{display:block;margin:12px 14px}
#sh-move .mf-note-label textarea{min-height:52px;resize:none}
#sh-move .mf-review-summary{margin:18px 14px}
#sh-move .mf-success{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:20px 14px 25px;box-sizing:border-box;text-align:center}
/* Supplied spec: 72.5px circle, 15% green wash, 40px mark stroked in #33B881 */
#sh-move .mf-success-check{width:72.5px;height:72.5px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(51,184,129,.15);color:#33B881;margin-bottom:20px}
#sh-move .mf-success-check .mf-check-mark{display:block;width:40px;height:40px}
#sh-move .mf-success strong{font-size:39px;font-weight:400;letter-spacing:-.04em}
#sh-move .mf-success b{font-size:14px;font-weight:400;color:#2bbc84}
#sh-move .mf-success p{font-size:12px;color:#688194;margin:5px 0 25px}
/* mf-confirmed used to grey the badge out so the old fly-away bubble could
   stand in for it. The badge is now the spec'd green mark in every state. */
#sh-move.mf-confirming .mf-success-check{opacity:0}
#sh-move.mf-confirming.mf-badge-in .mf-success-check{opacity:1;transition:opacity calc(260ms * var(--speed)) var(--ease-state)}

/* ── success copy RISES, it does not dissolve ────────────────────────────
   7px of travel reads as a cross-fade. 22px with a long ease-out is what
   makes it read as the summary arriving from underneath the bubble.      */
#sh-move.mf-confirming .mf-success strong,
#sh-move.mf-confirming .mf-success b,
#sh-move.mf-confirming .mf-success p,
#sh-move.mf-confirming .mf-success .mf-action{opacity:0;transform:translateY(22px)}
#sh-move.mf-confirming.mf-copy-in .mf-success strong,
#sh-move.mf-confirming.mf-copy-in .mf-success b,
#sh-move.mf-confirming.mf-copy-in .mf-success p,
#sh-move.mf-confirming.mf-copy-in .mf-success .mf-action{
  opacity:1;transform:none;
  transition:opacity calc(380ms * var(--speed)) var(--ease-state),
             transform calc(560ms * var(--speed)) var(--ease-settle);
}
/* staggered so the block arrives as a wave, not as one slab */
#sh-move.mf-confirming.mf-copy-in .mf-success strong   {transition-delay:0ms}
#sh-move.mf-confirming.mf-copy-in .mf-success b        {transition-delay:calc(85ms * var(--speed))}
#sh-move.mf-confirming.mf-copy-in .mf-success p        {transition-delay:calc(170ms * var(--speed))}
#sh-move.mf-confirming.mf-copy-in .mf-success .mf-action{transition-delay:calc(255ms * var(--speed))}

/* ── the confirm surface ─────────────────────────────────────────────────
   A circle covering the phone's full diagonal looks like a solid green
   screen at full scale. Its fixed radius keeps the shrink compositor-only. */
.mf-confirm-layer{position:absolute;inset:0;z-index:1000;opacity:0;pointer-events:auto;
  transition:opacity calc(150ms * var(--speed)) var(--ease-state)}
.mf-confirm-layer.is-green{opacity:1}

.mf-confirm-shape{
  position:absolute;left:50%;top:50%;
  width:var(--mf-side,1000px);height:var(--mf-side,1000px);
  margin-left:calc(var(--mf-side,1000px) / -2);
  margin-top:calc(var(--mf-side,1000px) / -2);
  border-radius:50%;
  background:#33B881;
  transform-origin:50% 50%;
  transform:translate(0,0) scale(1);
  will-change:transform;
  transition:transform calc(760ms * var(--speed)) cubic-bezier(.22,.72,.15,1);
}
/* Same 40-unit viewBox and same stroke-width as the final badge, so the mark
   keeps identical proportions — only its rendered size changes. */
.mf-confirm-check{position:absolute;left:50%;top:50%;width:92px;height:92px;color:#fff;
  transform:translate(-50%,-50%);
  transition:opacity calc(360ms * var(--speed)) var(--ease-state)}
.mf-confirm-check path{stroke-dasharray:38;stroke-dashoffset:38}
.mf-confirm-layer.is-green .mf-confirm-check path{
  animation:mf-confirm-draw calc(300ms * var(--speed)) calc(120ms * var(--speed)) var(--ease-ios) forwards}
@keyframes mf-confirm-draw{to{stroke-dashoffset:0}}

/* settled on the badge */
.mf-confirm-layer.is-bubble .mf-confirm-shape{
  transform:translate(var(--mf-bx),var(--mf-by)) scale(var(--mf-bs));
  box-shadow:inset 0 8px 12px rgba(255,255,255,.16),0 7px 17px rgba(29,147,102,.22)}
.mf-confirm-layer.is-bubble .mf-confirm-check{opacity:0}

/* ── the rise ────────────────────────────────────────────────────────────
   A bubble does not get fired upward. It releases, drifts, loses opacity
   as it goes, and wanders slightly off-axis on the way.                  */
.mf-confirm-layer.is-rising .mf-confirm-shape{
  transition:none;
  animation:mf-bubble-rise calc(1050ms * var(--speed)) cubic-bezier(.42,0,.62,.88) forwards}
@keyframes mf-bubble-rise{
  0%  {transform:translate(var(--mf-bx),var(--mf-by)) scale(var(--mf-bs));opacity:1}
  30% {transform:translate(calc(var(--mf-bx) - 6px),calc(var(--mf-by) - 90px))  scale(calc(var(--mf-bs) * .98));opacity:.92}
  62% {transform:translate(calc(var(--mf-bx) + 5px),calc(var(--mf-by) - 235px)) scale(calc(var(--mf-bs) * .91));opacity:.55}
  100%{transform:translate(var(--mf-bx),calc(var(--mf-by) - 430px))             scale(calc(var(--mf-bs) * .8));opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .mf-confirm-layer,.mf-confirm-shape,.mf-confirm-check{animation:none!important;transition:none!important}}
.reduced .mf-confirm-layer,.reduced .mf-confirm-shape,.reduced .mf-confirm-check{animation:none!important;transition:none!important}