/* FARAZ PWA UI — install banner, iOS sheet, update toast, offline chip.
   Theme tokens match style.css: bg #0b0d14, panel #131622, accent #3b82f6 → #a855f7 */

/* ============ install banner ============ */
.fpwa-banner{
  position:fixed;left:50%;transform:translateX(-50%) translateY(140%);
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:min(92vw,440px);
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:linear-gradient(180deg,#161a2a 0%,#10131f 100%);
  border:1px solid #2a3149;
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(59,130,246,.08),0 8px 24px rgba(0,0,0,.4);
  z-index:100000;
  transition:transform .5s cubic-bezier(.16,1.02,.29,1),opacity .4s;
  opacity:0;
  overflow:hidden;
}
.fpwa-banner.show{transform:translateX(-50%) translateY(0);opacity:1}
.fpwa-banner-glow{
  position:absolute;inset:-40% -20% auto -20%;height:120%;
  background:radial-gradient(60% 70% at 20% 10%,rgba(59,130,246,.16),transparent 70%),
             radial-gradient(50% 60% at 85% 20%,rgba(168,85,247,.12),transparent 70%);
  pointer-events:none;
}
.fpwa-banner-icon{
  flex-shrink:0;width:52px;height:52px;border-radius:14px;
  background:#181c2b;border:1px solid #2a3149;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.fpwa-banner-icon svg{width:42px;height:42px}
.fpwa-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fpwa-banner-text strong{font-size:15px;font-weight:800;color:#e8eaf0;letter-spacing:.01em}
.fpwa-banner-text span{font-size:11.5px;color:#8b93a7;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpwa-banner-btn{
  flex-shrink:0;position:relative;
  padding:10px 20px;border:none;border-radius:12px;cursor:pointer;
  font-size:13.5px;font-weight:800;color:#fff;letter-spacing:.02em;
  background:linear-gradient(120deg,#3b82f6,#7c3aed 85%);
  box-shadow:0 6px 18px rgba(59,130,246,.35);
  transition:transform .18s,box-shadow .18s,filter .18s;
  font-family:inherit;
}
.fpwa-banner-btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 10px 24px rgba(59,130,246,.45)}
.fpwa-banner-btn:active{transform:translateY(0) scale(.97)}
.fpwa-banner-x{
  flex-shrink:0;width:30px;height:30px;border:none;border-radius:9px;cursor:pointer;
  background:transparent;color:#8b93a7;display:flex;align-items:center;justify-content:center;
  transition:background .18s,color .18s;
}
.fpwa-banner-x:hover{background:rgba(139,147,167,.12);color:#e8eaf0}

/* ---- v69.51: Android native-app banner variants ---- */
.fpwa-banner-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.fpwa-banner-bazaar{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;border-radius:12px;cursor:pointer;
  font-size:12.5px;font-weight:700;color:#e8eaf0;text-decoration:none;
  background:#1b2133;border:1px solid #34405e;
  transition:transform .18s,border-color .18s,filter .18s;font-family:inherit;
}
.fpwa-banner-bazaar:hover{border-color:#3ddc84;filter:brightness(1.12)}
.fpwa-banner-bazaar:active{transform:scale(.97)}
.fpwa-banner-alt{
  position:absolute;left:14px;bottom:6px;
  border:none;background:none;cursor:pointer;
  font-size:10.5px;color:#767e93;text-decoration:underline dotted;
  padding:4px 6px;font-family:inherit;z-index:2;
}
.fpwa-banner-alt:hover{color:#aeb6ca}
@media(max-width:560px){
  /* v69.51: two-row Android banner — icon+text+close on top, both store
     buttons stretched full-width below. flex-wrap keeps every button
     on-screen in LTR AND RTL. */
  .fpwa-banner{flex-wrap:wrap;row-gap:10px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .fpwa-banner-icon{width:44px;height:44px}
  .fpwa-banner-icon svg{width:36px;height:36px}
  .fpwa-banner-text{flex:1 1 calc(100% - 130px);min-width:0}
  .fpwa-banner-actions{order:5;width:100%;justify-content:stretch;flex-wrap:nowrap}
  .fpwa-banner-actions .fpwa-banner-btn{flex:1 1 50%;min-width:0;padding:11px 8px;font-size:12.5px}
  .fpwa-banner-actions .fpwa-banner-bazaar{flex:1 1 50%;min-width:0;justify-content:center;padding:10px 8px;font-size:12px}
  .fpwa-banner-alt{bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:560px){
  .fpwa-banner{
    left:0;right:0;bottom:0;transform:translateY(140%);
    width:100%;border-radius:0;
    border-left:none;border-right:none;border-bottom:none;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
    gap:12px;
    box-sizing:border-box;
    max-width:100vw;
  }
  .fpwa-banner.show{transform:translateY(0)}
  .fpwa-banner-text span{white-space:normal}
  .fpwa-banner-btn{padding:10px 16px;font-size:12.5px}
}

/* ============ iOS A2HS sheet ============ */
.fpwa-sheet-wrap{
  position:fixed;inset:0;z-index:100001;
  background:rgba(5,7,12,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
  padding:24px;
}
.fpwa-sheet-wrap.open{opacity:1;pointer-events:auto}
.fpwa-sheet{
  width:min(92vw,380px);
  background:linear-gradient(180deg,#161a2a,#0f1220);
  border:1px solid #2a3149;border-radius:24px;
  padding:30px 26px 24px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.65);
  transform:translateY(24px) scale(.96);transition:transform .35s cubic-bezier(.16,1.02,.29,1);
}
.fpwa-sheet-wrap.open .fpwa-sheet{transform:translateY(0) scale(1)}
.fpwa-sheet-icon{
  width:84px;height:84px;margin:0 auto 14px;border-radius:22px;
  background:#181c2b;border:1px solid #2a3149;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 40px rgba(59,130,246,.14);
}
.fpwa-sheet-icon svg{width:62px;height:62px}
.fpwa-sheet h3{margin:0 0 20px;font-size:18.5px;font-weight:800;color:#e8eaf0;line-height:1.4;font-family:inherit}
.fpwa-steps{display:flex;flex-direction:column;gap:10px;text-align:start;margin-bottom:16px}
.fpwa-step{
  display:flex;align-items:center;gap:13px;
  background:rgba(24,28,43,.75);border:1px solid #232941;border-radius:14px;
  padding:13px 15px;
}
.fpwa-step-ic{
  flex-shrink:0;width:42px;height:42px;border-radius:11px;
  background:#131622;border:1px solid #232941;
  display:flex;align-items:center;justify-content:center;
}
.fpwa-step-plus{font-weight:800}
.fpwa-step span:last-child{font-size:13.5px;color:#c3c9d8;line-height:1.5;font-weight:500}
.fpwa-sheet-note{font-size:11.5px;color:#8b93a7;margin:2px 0 18px}
.fpwa-sheet-btn{
  width:100%;padding:13px;border:none;border-radius:14px;cursor:pointer;
  font-size:14.5px;font-weight:800;color:#fff;font-family:inherit;
  background:linear-gradient(120deg,#3b82f6,#7c3aed 85%);
  box-shadow:0 8px 22px rgba(59,130,246,.35);
  transition:filter .18s,transform .18s;
}
.fpwa-sheet-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ============ update toast ============ */
.fpwa-update{
  position:fixed;left:50%;transform:translateX(-50%) translateY(150%);
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:14px;
  background:#131622;border:1px solid #2a3149;border-radius:16px;
  padding:12px 12px 12px 20px;z-index:100002;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  transition:transform .45s cubic-bezier(.16,1.02,.29,1);
}
.fpwa-update.show{transform:translateX(-50%) translateY(0)}
.fpwa-update span{font-size:13px;font-weight:600;color:#c3c9d8;white-space:nowrap}
.fpwa-update button{
  padding:8px 18px;border:none;border-radius:10px;cursor:pointer;
  font-size:12.5px;font-weight:800;color:#fff;font-family:inherit;
  background:linear-gradient(120deg,#22c55e,#16a34a);
  transition:filter .18s;
}
.fpwa-update button:hover{filter:brightness(1.1)}
@media(max-width:560px){
  .fpwa-update{width:calc(100vw - 32px);justify-content:space-between}
  .fpwa-update span{white-space:normal;font-size:12.5px}
}

/* ============ offline chip ============ */
.fpwa-offline{
  position:fixed;top:calc(70px + env(safe-area-inset-top,0px));left:50%;
  transform:translateX(-50%) translateY(-16px);
  display:flex;align-items:center;gap:8px;
  background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.4);color:#fbbf24;
  padding:7px 16px;border-radius:99px;font-size:12px;font-weight:700;
  z-index:99998;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
}
.fpwa-offline.show{opacity:1;transform:translateX(-50%) translateY(0)}
.fpwa-offline-dot{width:7px;height:7px;border-radius:99px;background:#eab308;flex-shrink:0;
  animation:fpwa-pulse 1.4s ease-in-out infinite}
@keyframes fpwa-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(234,179,8,.5)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(234,179,8,0)}}

/* mobile menu row injected by pwa.js */
#farazPwaMenuRow{color:var(--text,#e8eaf0);font-size:15px;font-weight:500}

/* ============ safe-area tokens (v45) ============ */
html{--fz-safe-top:env(safe-area-inset-top,0px);--fz-safe-bottom:env(safe-area-inset-bottom,0px)}

/* ============ standalone (installed app) mode ============ */
html.pwa-standalone body{overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent}
html.pwa-standalone nav{padding-top:var(--fz-safe-top)}
html.pwa-standalone .mininav{padding-top:calc(14px + var(--fz-safe-top))}
html.pwa-standalone #mobileMenu{top:calc(64px + var(--fz-safe-top))}
html.pwa-standalone footer{padding-bottom:calc(26px + var(--fz-safe-bottom))}

/* v69.53 — campaign banner in the installed app: the banner is the first
   element of the page and owns the notch while it is on screen (its
   background fills the safe area, its content starts below it; promo.js
   re-pads the nav per frame as the banner scrolls away). */
html.pwa-standalone .fz-camp-bar{padding-top:var(--fz-safe-top)}

/* v45 FIX — the fixed nav grows by the notch/status-bar inset in standalone
   mode, but .page-wrap's 84px top padding did not. The first ~47-59px of
   page content (the crypto live-price strip on /app) sat UNDER the nav.
   Grow the page with the nav: */
html.pwa-standalone .page-wrap{padding-top:calc(84px + var(--fz-safe-top))}
html.pwa-standalone .fpwa-offline{top:calc(70px + var(--fz-safe-top))}

/* ============ RTL ============
   NOTE: do NOT re-declare transform here. [dir=rtl] .fpwa-banner has higher
   specificity (0,2,0) than the mobile media-query rule (0,1,0) — repeating
   the desktop transform:translateX(-50%) here used to override the mobile
   full-width sheet's transform:translateY(...) and shift half the banner
   off-screen to the left on Persian phones. The base rules already center
   correctly; RTL only needs direction. */
[dir=rtl] .fpwa-banner,[dir=rtl] .fpwa-update,[dir=rtl] .fpwa-offline{direction:rtl}
[dir=rtl] .fpwa-steps{text-align:right}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .fpwa-banner,.fpwa-update,.fpwa-sheet,.fpwa-sheet-wrap,.fpwa-offline{transition:none!important}
  .fpwa-offline-dot{animation:none}
  .view-enter{animation:none!important}
  #fzSplash .fz-spl-bar i{animation-duration:2.4s}
}

/* ============ v45: bottom tab bar (standalone app, mobile) ============
   Defensive top/height guards: style.css ships a global `nav{position:fixed;
   top:0;left:0;right:0}` selector — if this bar is ever re-introduced as a
   <nav> (or another global rule leaks in), top:auto prevents top:0+bottom:0
   from stretching the bar into a full-page overlay. */
#fzTabBar{
  position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;
  z-index:99990;
  display:flex;justify-content:space-around;align-items:stretch;gap:2px;
  padding:5px 6px calc(5px + var(--fz-safe-bottom));
  background:rgba(11,13,20,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid #232941;
  box-shadow:0 -12px 34px rgba(0,0,0,.42);
}
html.pwa-standalone body.has-tabbar{--fz-bar:60px}
html.pwa-standalone body.has-tabbar{padding-bottom:calc(60px + var(--fz-safe-bottom))}
.fz-tab{
  flex:1;max-width:104px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 2px 5px;background:none;border:none;cursor:pointer;
  color:#8b93a7;font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.01em;
  border-radius:12px;-webkit-tap-highlight-color:transparent;
  transition:color .18s,transform .12s;
  position:relative;
}
.fz-tab svg{width:21px;height:21px;pointer-events:none}
.fz-tab span{pointer-events:none}
.fz-tab:active{transform:scale(.92)}
.fz-tab.active{color:#4f8ef7}
.fz-tab.active::after{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,#3b82f6,#a855f7);
}
.fz-tab.danger{color:#8b93a7}
.fz-tab.danger:active{color:#ef4444}
/* desktop / tablet standalone — top nav is enough, tab bar is a phone pattern */
@media(min-width:769px){
  #fzTabBar{display:none!important}
  html.pwa-standalone body.has-tabbar{--fz-bar:0px;padding-bottom:0}
}
/* clearance: raise floating UI above the tab bar on app pages */
@media(max-width:768px){
  html.pwa-standalone body.has-tabbar #faraz-support-fab{bottom:calc(16px + 60px + var(--fz-safe-bottom))}
  html.pwa-standalone body.has-tabbar .farah-toast,
  html.pwa-standalone body.has-tabbar .faraz-toast{bottom:calc(14px + 60px + var(--fz-safe-bottom))}
  html.pwa-standalone body.has-tabbar #toast{bottom:calc(24px + 60px + var(--fz-safe-bottom))}
  html.pwa-standalone body.has-tabbar #backTop{bottom:calc(116px + 60px + var(--fz-safe-bottom))}
  html.pwa-standalone body.has-tabbar .fpwa-update{bottom:calc(18px + 60px + var(--fz-safe-bottom))}
}

/* ============ v46: modals open ABOVE the app tab bar ============
   The add-holding bottom sheet (.pf-modal, z-index 95 in style.css) and
   the generic .modal-bg (z-index 950) both sat UNDER the tab bar's
   99990 — on phones inside the installed app the sheet's footer (with
   the Add button) was hidden behind the bar, making holdings impossible
   to add. Native pattern: the scrim covers the tab bar for the whole
   modal flow, so tab-switching mid-form is impossible and the foot is
   fully visible. Toasts stay above everything. */
html.pwa-standalone body.has-tabbar .pf-modal{z-index:99991}
html.pwa-standalone body.has-tabbar .modal-bg{z-index:99992}
html.pwa-standalone body.has-tabbar #tourOverlay{z-index:99993}
html.pwa-standalone body.has-tabbar #tourTip{z-index:99994}
/* the support FAB (z-index 1000000) sits exactly on the add-sheet's footer
   corner — step it aside while the sheet is open (same pattern the logout
   confirm sheet uses). Works in browser mode too. */
body.pf-open #faraz-support-fab{opacity:0;pointer-events:none;transition:opacity .2s}

/* ============ v45: pull-to-refresh indicator ============ */
#fzPtr{
  position:fixed;top:calc(64px + var(--fz-safe-top) + 8px);left:50%;
  width:40px;height:40px;border-radius:50%;
  transform:translate(-50%,-56px);opacity:0;
  background:rgba(17,20,32,.97);border:1px solid #2a3149;
  display:flex;align-items:center;justify-content:center;
  z-index:99995;pointer-events:none;
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(59,130,246,.06);
  transition:opacity .2s;
}
#fzPtr.on{opacity:1}
#fzPtr svg{width:17px;height:17px;color:#8b93a7;transition:transform .16s,color .16s}
#fzPtr.ready svg{color:#22c55e;transform:rotate(180deg)}
#fzPtr.spin svg{color:#4f8ef7;animation:fzPtrSpin .75s linear infinite}
@keyframes fzPtrSpin{to{transform:rotate(360deg)}}

/* ============ v45: cold-boot splash (standalone app) ============ */
#fzSplash{
  position:fixed;inset:0;z-index:9999999;background:#0b0d14;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .4s;pointer-events:none;
}
#fzSplash.hide{opacity:0}
#fzSplash .fz-spl-logo{animation:fzSplFloat 2.4s ease-in-out infinite}
@keyframes fzSplFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#fzSplash .fz-spl-word{
  font-size:21px;font-weight:800;letter-spacing:.34em;text-indent:.34em;color:#e8eaf0;
}
#fzSplash .fz-spl-tag{font-size:11.5px;color:#8b93a7;font-weight:600;margin-top:-8px}
#fzSplash .fz-spl-bar{width:138px;height:3px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
#fzSplash .fz-spl-bar i{position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#a855f7);animation:fzSplBar 1.15s ease-in-out infinite}
@keyframes fzSplBar{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ============ v45: confirm bottom-sheet (logout etc.) ============ */
.fz-confirm{
  position:fixed;left:50%;bottom:calc(22px + var(--fz-safe-bottom));
  transform:translateX(-50%) translateY(150%);
  width:min(92vw,400px);
  background:linear-gradient(180deg,#161a2a,#10131f);
  border:1px solid #2a3149;border-radius:20px;
  padding:20px 20px 14px;z-index:100003;text-align:center;
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  transition:transform .38s cubic-bezier(.16,1.02,.29,1);
}
.fz-confirm.show{transform:translateX(-50%) translateY(0)}
/* sheet fully clears the app tab bar; support FAB steps aside while open */
html.pwa-standalone body.has-tabbar .fz-confirm{bottom:calc(22px + 60px + var(--fz-safe-bottom))}
body.fz-confirm-open #faraz-support-fab{opacity:0;pointer-events:none;transition:opacity .2s}
.fz-confirm h4{margin:0 0 6px;font-size:15.5px;font-weight:800;color:#e8eaf0;font-family:inherit}
.fz-confirm p{margin:0 0 16px;font-size:12.5px;color:#8b93a7;line-height:1.55}
.fz-confirm-btns{display:flex;gap:10px}
.fz-confirm-btns button{
  flex:1;padding:11px;border:none;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:800;transition:filter .16s,transform .16s;
}
.fz-confirm-btns button:active{transform:scale(.97)}
.fz-cb-yes{background:linear-gradient(120deg,#ef4444,#b91c1c);color:#fff}
.fz-cb-no{background:#181c2b;border:1px solid #2a3149;color:#c3c9d8}
.fz-cb-yes:hover,.fz-cb-no:hover{filter:brightness(1.1)}

/* ============ v45: view-switch transition (dashboard ↔ account) ============ */
.view-enter{animation:fzViewIn .26s cubic-bezier(.2,.8,.25,1)}
@keyframes fzViewIn{from{opacity:.35;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}