/* Rufiyaa Update 4 — 2026-11-01 Savings Details final iPhone/iPad visual feedback.
   Isolated QA presentation only. Existing Add, Withdraw, Undo, and menu handlers unchanged.
   Keep outside all Finance/Accounts/Wallet styling. */

/* Center the actual SVG, not just its outer pill. The markup deliberately contains
   a second span (.u4sg-icon-art), which otherwise retains an inline baseline. */
#modal-root .modal.u4sg-sticky-details > .modal-head h2 > .u4sg-title-icon{
 display:grid!important;place-items:center!important;align-self:center!important;
 inline-size:40px!important;block-size:40px!important;min-inline-size:40px!important;
 flex:0 0 40px!important;padding:0!important;margin:0!important;
 line-height:0!important;vertical-align:middle!important;box-sizing:border-box!important;
}
#modal-root .modal.u4sg-sticky-details > .modal-head h2 > .u4sg-title-icon > .u4sg-icon-art{
 display:grid!important;place-items:center!important;
 inline-size:100%!important;block-size:100%!important;min-width:0!important;
 line-height:0!important;padding:0!important;margin:0!important;
}
#modal-root .modal.u4sg-sticky-details > .modal-head h2 > .u4sg-title-icon svg{
 display:block!important;inline-size:23px!important;block-size:23px!important;
 margin:auto!important;position:static!important;transform:none!important;
 vertical-align:middle!important;flex-shrink:0!important;
}
/* Same exact visual center for the duplicate small icon in the amount hero. */
#modal-root .modal.u4sg-sticky-details .savings-detail-head-v74 .u4sg-detail-icon{
 display:grid!important;place-items:center!important;justify-self:center!important;
 width:38px!important;height:38px!important;min-width:38px!important;
 padding:0!important;margin:0!important;box-sizing:border-box!important;
 line-height:0!important;vertical-align:middle!important;
}
#modal-root .modal.u4sg-sticky-details .savings-detail-head-v74 .u4sg-detail-icon svg{
 width:23px!important;height:23px!important;display:block!important;
 margin:auto!important;transform:none!important;vertical-align:middle!important;
}

/* Floating actions: no solid white footer slab, separator, or full-width wash. */
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sg-sticky-details,
#modal-root .modal.u4sg-sticky-details{position:relative!important;isolation:isolate!important}
#modal-root .modal.u4sg-sticky-details > .u4sg-detail-scroll{
 /* Actions overlay the scroll region; the final row must still be fully reachable. */
 padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
 scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
}
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer,
#modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer{
 position:absolute!important;bottom:0!important;left:0!important;right:0!important;
 z-index:5!important;display:flex!important;justify-content:center!important;
 width:100%!important;max-width:100%!important;box-sizing:border-box!important;
 flex:none!important;margin:0!important;
 padding:0 22px calc(17px + env(safe-area-inset-bottom))!important;
 border:0!important;border-top:0!important;border-radius:0!important;
 background:transparent!important;box-shadow:none!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 pointer-events:none!important;
}
#modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer > .savings-actions-v74{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 width:100%!important;max-width:510px!important;
 gap:10px!important;margin:0!important;padding:0!important;
 background:transparent!important;border:0!important;box-shadow:none!important;
 pointer-events:auto!important;
}
#modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer .savings-actions-v74 > button{
 min-height:51px!important;height:51px!important;border-radius:17px!important;
 border:1px solid rgba(35,108,87,.13)!important;
 box-shadow:0 10px 24px rgba(13,50,43,.18),0 2px 6px rgba(13,50,43,.055)!important;
 transition:transform .18s ease,box-shadow .18s ease!important;
 -webkit-tap-highlight-color:transparent!important;
}
#modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer .savings-actions-v74 > button.primary{
 background:#08684e!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
 border-color:#08684e!important;
}
#modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer .savings-actions-v74 > button.secondary{
 background:color-mix(in srgb,var(--card,#fff) 78%,#d5ecdf)!important;
 color:var(--text,#172638)!important;-webkit-text-fill-color:var(--text,#172638)!important;
 border-color:color-mix(in srgb,var(--accent,#087b59) 18%,var(--border,#dce8e4))!important;
 backdrop-filter:blur(18px) saturate(135%)!important;
 -webkit-backdrop-filter:blur(18px) saturate(135%)!important;
}
#modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer .savings-actions-v74 > button:not(:disabled):active{
 transform:scale(.975)!important;box-shadow:0 6px 15px rgba(13,50,43,.12)!important;
}
@media(max-width:540px){
 #modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer{
  padding:0 14px calc(14px + env(safe-area-inset-bottom))!important;
 }
 #modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer > .savings-actions-v74{
  max-width:none!important;gap:9px!important;
 }
 #modal-root .modal.u4sg-sticky-details > .u4sg-detail-scroll{
  padding-bottom:calc(107px + env(safe-area-inset-bottom))!important;
 }
 #modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer .savings-actions-v74 > button{
  min-height:50px!important;height:50px!important;
 }
}
html[data-theme="dark"] #modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer .savings-actions-v74 > button.secondary{
 background:rgba(44,80,68,.87)!important;border-color:rgba(155,220,185,.24)!important;
 color:#e6f6ed!important;-webkit-text-fill-color:#e6f6ed!important;
}
@media(prefers-reduced-motion:reduce){
 #modal-root .modal.u4sg-sticky-details > .u4sg-detail-footer button{transition:none!important}
}

/* 2026-11-01 iPad Safari correction: match the compact proportions of the
   already-approved Linked Card sheet instead of nearly spanning the tablet.
   Below 650 CSS px, retain the established full-width phone/split-view style. */
@media (min-width:650px){
 body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4sg-sticky-details,
 #modal-root .modal.u4sg-sticky-details{
  width:min(620px, calc(100vw - 44px))!important;
  max-width:620px!important;
  margin-inline:auto!important;
 }
}