/* ═══════════════════════════════════════════════════════════════
   fz-ios.css — FlipZip iOS-Only UI/UX Layer  (v2.0 · 2026-05-15)
   Applies premium native-app polish on iPhone / iPad. Triggers via
   TWO mechanisms so it works even if JS is delayed by the service
   worker on Safari:
     • html.is-ios      → set by fz-ios.js (and the inline boot)
     • @supports (-webkit-touch-callout:none) → pure-CSS iOS Safari
       feature query — fires on Safari iOS even if JS hasn't run yet.
═══════════════════════════════════════════════════════════════ */

/* ── Pure-CSS iOS Safari trigger (fallback when JS is stale) ──
   `-webkit-touch-callout` is iOS-WebKit-only. Safari iOS supports
   it; Safari macOS / Chrome / Firefox do not. This @supports block
   activates the SAME fixes without waiting for fz-ios.js. */
@supports (-webkit-touch-callout: none){
  html{
    --fz-vh: 1vh;
    --fz-safe-top:    env(safe-area-inset-top,    0px);
    --fz-safe-right:  env(safe-area-inset-right,  0px);
    --fz-safe-bottom: env(safe-area-inset-bottom, 0px);
    --fz-safe-left:   env(safe-area-inset-left,   0px);
  }
  html, body{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
  }
  /* Re-enable selection where real content lives */
  p, h1, h2, h3, h4, .selectable, .desc, .product-desc,
  .review-text, input, textarea{
    -webkit-user-select: text;
    user-select: text;
  }
  /* Stop input zoom on focus (font < 16px triggers Safari zoom) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea{
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
  }
  /* Yellow autofill killer */
  input:-webkit-autofill{
    -webkit-text-fill-color: #1A1033;
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
    transition: background-color 9999s ease-in-out 0s;
  }
  /* Safe-area padding for sticky bottom UI */
  .fz-bottom-nav, .bottom-nav, .tab-bar, .mobile-tabbar,
  #fz-mobile-tabbar, .checkout-cta, .sticky-cta, .fz-fab,
  .mobile-bottom{
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  /* Premium frosted-glass tab bar (matches iOS UIKit) */
  .fz-bottom-nav, .bottom-nav, .tab-bar, .mobile-tabbar,
  #fz-mobile-tabbar{
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-top: .5px solid rgba(0,0,0,.08);
    box-shadow: 0 -8px 24px rgba(91,46,255,.06);
  }
  /* Safe area left+right for landscape on notched phones */
  .page, .container, main{
    padding-left:  max(env(safe-area-inset-left, 0px), 0px);
    padding-right: max(env(safe-area-inset-right, 0px), 0px);
  }
  /* Momentum scrolling everywhere */
  .scroll-x, .scroll-y, .h-scroll, .v-scroll,
  .fz-nav-inner, .fz-feed, .modal-body, .drawer-body, .sheet-body,
  .swipe-feed, .reels{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Image polish */
  img{
    -webkit-user-drag: none;
    image-rendering: -webkit-optimize-contrast;
  }
  /* Native-feel button press */
  button, .btn, .cta{
    -webkit-appearance: none;
    appearance: none;
    transition: transform .12s cubic-bezier(.2,.8,.2,1), opacity .12s;
  }
  button:active, .btn:active, .cta:active,
  .product-card:active, .feed-card:active,
  .icon-btn:active, .fz-hb:active{
    transform: scale(0.96);
    opacity: 0.92;
  }
  /* Min 44pt tap targets per Apple HIG */
  button, .icon-btn, .fz-hb, .fz-nav-link, a.btn, .tap{
    min-height: 40px;
    min-width: 40px;
  }
  /* System font for native feel */
  body, button, input, select, textarea{
    font-family:
      -apple-system, BlinkMacSystemFont,
      "SF Pro Text", "SF Pro Display",
      "Segoe UI", system-ui, sans-serif;
  }
  /* Native form field rounded corners */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select{
    border-radius: 12px;
  }
  /* iOS standalone (PWA): coloured status bar + dodge notch */
  @media (display-mode: standalone){
    body::before{
      content:"";
      position: fixed; top:0; left:0; right:0;
      height: env(safe-area-inset-top, 0px);
      background: #5B2EFF;
      z-index: 99999;
      pointer-events: none;
    }
    .header, #fz-hdr, .topbar{
      padding-top: env(safe-area-inset-top, 0px);
    }
  }
}

/* ───────────────────────────────────────────────────────────────
   The rest of the file uses html.is-ios — set by fz-ios.js. Both
   layers are intentionally redundant so the user sees correct UX
   even if JS is delayed by service-worker caching on first load.
───────────────────────────────────────────────────────────────── */

/* ── 20. STICKY HEADER FIX for iOS Safari (CRITICAL) ──
   `body{overflow-x:hidden}` breaks position:sticky on iOS Safari.
   We swap it for `overflow-x:clip` which iOS Safari 16+ supports
   without killing sticky. Pre-16 we forgive the horizontal scroll
   in exchange for working sticky headers. */
@supports (-webkit-touch-callout: none){
  html, body{
    overflow-x: clip !important;
    /* Force body to be the natural scroll container */
    position: static !important;
  }
  /* The page wrapper must NOT have its own scroll — sticky breaks */
  .page{
    overflow: visible !important;
    min-height: auto !important;
  }
  /* Header sticky — use the -webkit- prefix for older iOS too */
  .header,
  #fz-hdr,
  .orders-header{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
    /* iOS Safari renders sticky better when the element is its own layer */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    will-change: transform;
  }
  /* No ancestor of a sticky element may have overflow:hidden/auto.
     Safe-belt: remove it on common wrappers. */
  .page, .container, main, #page, #main{
    overflow: visible !important;
  }
  /* Page width: explicitly fit viewport on iOS phones */
  .page{
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
  }
}

/* ── 21. FlipZip Promo Strip (Coupons + FlipCoins, mobile-prominent) ──
   Rendered & populated by fz-ios.js / fz-mobile-promo.js. The same
   strip appears on every page that loads the iOS layer so users see
   active offers + their coin balance everywhere — matches desktop. */
.fz-promo-strip{
  display:flex;
  gap:8px;
  padding:8px 12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:linear-gradient(90deg,#FFF6E0 0%,#FFE7C2 50%,#FFD6E0 100%);
  border-bottom:1px solid rgba(255,170,0,.25);
  position:sticky;
  top:0;
  z-index:90;
}
.fz-promo-strip::-webkit-scrollbar{display:none}

.fz-promo-chip{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;font-weight:700;
  color:#1A1033;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  border:1px dashed #FF9F1C;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s;
}
.fz-promo-chip:active{transform:scale(.96)}
.fz-promo-chip .code{
  background:#FFE082;
  border-radius:6px;
  padding:1px 7px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;font-weight:800;
  letter-spacing:.5px;
  color:#5B2EFF;
}
.fz-promo-chip.coin{
  background:linear-gradient(135deg,#FFE082 0%,#FFB800 100%);
  border:none;
  color:#5B2EFF;
}
.fz-promo-chip.coin .bal{
  font-weight:900;color:#1A1033;
}
.fz-promo-chip .save{
  color:#00C896;font-weight:800;
}
/* Stack promo above header — both sticky, browser handles ordering */
@supports (-webkit-touch-callout: none){
  .fz-promo-strip + .header,
  .fz-promo-strip + #fz-hdr{
    top: 38px !important; /* approx promo strip height */
  }
}

/* ── 22. Order placement button — always tappable on Safari ── */
@supports (-webkit-touch-callout: none){
  #place-btn,
  #fz-place-order-btn,
  .place-order-btn{
    position: relative !important;
    z-index: 5;
    -webkit-touch-callout: none;
    /* Prevent any parent overflow-clip from hiding the press target */
    transform: translateZ(0);
  }
}

/* ── 1. Dynamic viewport: fix the iOS Safari "100vh jumps" bug ──
   Replaces 100vh with a JS-measured custom property so full-screen
   panels (feed, modals, drawers) don't jump when the address bar
   shows / hides. */
html.is-ios{
  /* Live updated by fz-ios.js on resize / orientation */
  --fz-vh: 1vh;
  /* Honour the notch + home indicator everywhere */
  --fz-safe-top:    env(safe-area-inset-top,    0px);
  --fz-safe-right:  env(safe-area-inset-right,  0px);
  --fz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fz-safe-left:   env(safe-area-inset-left,   0px);
}

/* Where we used 100vh, prefer the dynamic value */
html.is-ios .h-screen,
html.is-ios .full-screen,
html.is-ios .fz-feed,
html.is-ios .fz-feed-wrap,
html.is-ios .modal,
html.is-ios .drawer,
html.is-ios .sheet,
html.is-ios .page{
  min-height: calc(var(--fz-vh, 1vh) * 100);
}

/* ── 2. Kill the small annoyances that make web feel non-native ── */
html.is-ios,
html.is-ios body{
  /* No grey tap-flash on links / buttons */
  -webkit-tap-highlight-color: transparent;
  /* No long-press image / link callout sheet */
  -webkit-touch-callout: none;
  /* Stop iOS rotating from blowing up text size */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smoother font rendering on Retina */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent rubber-band on the document — inner scrollers still work */
  overscroll-behavior-y: none;
  /* Disable text selection on UI chrome; we re-enable for content below */
  -webkit-user-select: none;
  user-select: none;
}

/* Re-enable selection where real content lives */
html.is-ios p,
html.is-ios h1, html.is-ios h2, html.is-ios h3, html.is-ios h4,
html.is-ios .selectable,
html.is-ios .desc,
html.is-ios .product-desc,
html.is-ios .review-text,
html.is-ios input,
html.is-ios textarea{
  -webkit-user-select: text;
  user-select: text;
}

/* ── 3. Native system font on iOS for true "app" feel ── */
html.is-ios body,
html.is-ios button,
html.is-ios input,
html.is-ios select,
html.is-ios textarea{
  font-family:
    -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "SF Pro Display",
    "Segoe UI", system-ui, sans-serif;
}

/* ── 4. Stop "input zoom" on focus
   Safari zooms in whenever a form field has font-size < 16px.
   Force 16px on every focusable field on iOS. Affects iOS only. */
html.is-ios input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.is-ios select,
html.is-ios textarea{
  font-size: 16px !important;
  /* Keep visual size tidy: scale rendered size via padding/line-height not font */
  line-height: 1.25;
  /* Round corners & remove iOS default rounded glow */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
}

/* Yellow autofill background killer */
html.is-ios input:-webkit-autofill,
html.is-ios input:-webkit-autofill:hover,
html.is-ios input:-webkit-autofill:focus,
html.is-ios textarea:-webkit-autofill,
html.is-ios select:-webkit-autofill{
  -webkit-text-fill-color: #1A1033;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ── 5. Momentum scrolling on every scroll container ── */
html.is-ios .scroll-x,
html.is-ios .scroll-y,
html.is-ios .h-scroll,
html.is-ios .v-scroll,
html.is-ios .fz-nav-inner,
html.is-ios .fz-feed,
html.is-ios .modal-body,
html.is-ios .drawer-body,
html.is-ios .sheet-body{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* ── 6. Hover states that get "stuck" on iOS after tap ── */
@media (hover: none) and (pointer: coarse){
  html.is-ios a:hover,
  html.is-ios button:hover,
  html.is-ios .fz-hb:hover,
  html.is-ios .fz-nav-link:hover,
  html.is-ios .icon-btn:hover{
    background: inherit;
    color: inherit;
    transform: none;
  }
  /* Use :active for press feedback instead (snappy, native-feel) */
  html.is-ios a:active,
  html.is-ios button:active,
  html.is-ios .fz-hb:active,
  html.is-ios .icon-btn:active,
  html.is-ios .product-card:active,
  html.is-ios .feed-card:active{
    transform: scale(0.97);
    transition: transform .08s ease-out;
  }
}

/* ── 7. SAFE-AREA padding for sticky / fixed UI ──
   Honour the notch up top and the home indicator at the bottom on
   every fullscreen / pinned element. */
html.is-ios .fz-bottom-nav,
html.is-ios .bottom-nav,
html.is-ios .tab-bar,
html.is-ios .mobile-tabbar,
html.is-ios .mobile-bottom,
html.is-ios #fz-mobile-tabbar,
html.is-ios .checkout-cta,
html.is-ios .sticky-cta,
html.is-ios .fz-fab{
  padding-bottom: calc(var(--fz-safe-bottom, 0px) + 8px) !important;
}

html.is-ios .fz-bottom-nav,
html.is-ios .bottom-nav,
html.is-ios .tab-bar,
html.is-ios .mobile-tabbar{
  /* Premium frosted glass — looks identical to iOS UIKit tab bar */
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-top: .5px solid rgba(0,0,0,.08);
  box-shadow: 0 -8px 24px rgba(91,46,255,.06);
}

html.is-ios.is-ios-pwa .header,
html.is-ios.is-ios-pwa #fz-hdr,
html.is-ios.is-ios-pwa .topbar{
  padding-top: var(--fz-safe-top, 0px);
}

/* In standalone PWA, dodge the status bar inside the gradient header */
html.is-ios.is-ios-pwa .header::before{
  top: var(--fz-safe-top, 0px);
}

/* Right & left safe-area for landscape on notched devices */
html.is-ios .page,
html.is-ios .container,
html.is-ios main{
  padding-left:  max(var(--fz-safe-left, 0px), 0px);
  padding-right: max(var(--fz-safe-right, 0px), 0px);
}

/* ── 8. Premium glass surface for sheets, modals, popovers ──
   iOS users expect frosted blurs — they're cheap on Apple GPUs. */
html.is-ios .modal-content,
html.is-ios .sheet-content,
html.is-ios .drawer-content,
html.is-ios .toast,
html.is-ios .fz-toast{
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: 22px 22px 0 0;
}

/* Bottom sheet drag-handle — the little grey pill iOS uses */
html.is-ios .sheet-content::before,
html.is-ios .drawer-content::before{
  content:"";
  display:block;
  width:38px;height:5px;border-radius:3px;
  background:rgba(0,0,0,.18);
  margin:8px auto 4px;
}

/* ── 9. Buttons — use iOS pressure & rounded corner conventions ── */
html.is-ios button,
html.is-ios .btn,
html.is-ios .cta{
  cursor: pointer;
  border-radius: 14px;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .12s cubic-bezier(.2,.8,.2,1), opacity .12s;
}
html.is-ios button:active,
html.is-ios .btn:active,
html.is-ios .cta:active{
  transform: scale(0.96);
  opacity: 0.92;
}

/* ── 10. Smoother scroll snapping for the reels-style swipe feed ── */
html.is-ios .swipe-feed,
html.is-ios .fz-feed,
html.is-ios .reels{
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-padding-top: var(--fz-safe-top, 0px);
  height: calc(var(--fz-vh, 1vh) * 100);
}
html.is-ios .swipe-feed > *,
html.is-ios .fz-feed > *,
html.is-ios .reels > *{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: calc(var(--fz-vh, 1vh) * 100);
}

/* ── 11. Images — sharper on Retina, no drag ghost ── */
html.is-ios img{
  -webkit-user-drag: none;
  user-select: none;
  image-rendering: -webkit-optimize-contrast;
}

/* ── 12. Skeleton shimmer — uses GPU-friendly transform animation ── */
html.is-ios .skeleton,
html.is-ios .shimmer{
  background:
    linear-gradient(90deg, #ECE9FB 0%, #F6F4FF 50%, #ECE9FB 100%);
  background-size: 200% 100%;
  animation: fzIosShimmer 1.1s linear infinite;
}
@keyframes fzIosShimmer{
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 13. PWA standalone: hide browser-only chrome, add status bar bg ── */
html.is-ios.is-ios-pwa body::before{
  content:"";
  position: fixed; top:0; left:0; right:0;
  height: var(--fz-safe-top, 0px);
  background: #5B2EFF; /* matches theme-color */
  z-index: 99999;
  pointer-events: none;
}
html.is-ios.is-ios-pwa .open-in-app,
html.is-ios.is-ios-pwa .pwa-install,
html.is-ios.is-ios-pwa .a2hs{
  display: none !important;
}

/* ── 14. Form date / time pickers — flatten to match design ── */
html.is-ios input[type="date"],
html.is-ios input[type="time"],
html.is-ios input[type="datetime-local"]{
  background:#fff;
  min-height: 44px; /* Apple HIG minimum tap target */
}

/* ── 15. Minimum tap target (Apple HIG = 44pt) ── */
html.is-ios button,
html.is-ios .icon-btn,
html.is-ios .fz-hb,
html.is-ios .fz-nav-link,
html.is-ios a.btn,
html.is-ios .tap{
  min-height: 40px;
  min-width: 40px;
}

/* ── 16. Snappy "Add to Home Screen" hint banner ── */
.fz-ios-a2hs{
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--fz-safe-bottom, 0px) + 12px);
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.06);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #1A1033;
  z-index: 9999;
  transform: translateY(120%); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.fz-ios-a2hs.show{ transform: translateY(0); opacity: 1; }
.fz-ios-a2hs .ic{ font-size:22px }
.fz-ios-a2hs .txt{ flex:1; line-height:1.3 }
.fz-ios-a2hs .txt b{ display:block; font-size:13.5px; color:#1A1033 }
.fz-ios-a2hs .txt span{ font-size:11.5px; color:#6B6585 }
.fz-ios-a2hs .x{
  background:transparent;border:none;font-size:18px;color:#9B94BB;
  width:32px;height:32px;border-radius:50%;cursor:pointer;
}

/* ── 17. Keep the keyboard from hiding the focused field ── */
html.is-ios .kb-aware{
  scroll-margin-bottom: 80px;
}

/* ── 18. Disable iOS Safari pull-to-refresh ONLY on the feed page ── */
html.is-ios.no-ptr,
html.is-ios.no-ptr body{
  overscroll-behavior-y: none;
  overflow: hidden;
}
html.is-ios.no-ptr .page,
html.is-ios.no-ptr .fz-feed{
  height: calc(var(--fz-vh, 1vh) * 100);
  overflow-y: auto;
}

/* ── 19. Fast-tap ripple alternative (no JS needed) ── */
html.is-ios .ripple{
  position: relative;
  overflow: hidden;
}
html.is-ios .ripple::after{
  content:"";
  position: absolute; inset:0;
  background: radial-gradient(circle at center, rgba(91,46,255,.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .2s ease-out;
  pointer-events:none;
}
html.is-ios .ripple:active::after{ opacity: 1; }