/* ============================================================
   account.css - F. BINSABBAR Private Membership portal, page-specific bits.

   The cohesive client-pages design system now lives in the shared
   stylesheet fb-private-membership.css (loaded BEFORE this file in
   index.html, AFTER the canonical fb-ui.css). That shared file owns
   the page frame, top bar, login, hero, tabs, details, orders, the
   membership card, the Membership tab (points + progress + ladder +
   benefits + earn explainer), the exclusive grid + request CTA,
   message screen and footer.

   This file is intentionally near-empty: it exists only for portal-
   ONLY overrides that should never leak into the register page. Keep
   it tiny - if a rule is shared, lift it to fb-private-membership.css.

   No em-dashes anywhere. "F. BINSABBAR" always uppercase.
   ============================================================ */

/* ============================================================
   TOUCH HARDENING (portal-only; the iOS app loads this page as a remote
   URL): preserve pinch zoom and inner horizontal rails while avoiding sideways
   rubber-band. overscroll-behavior-x: none kills the
   horizontal swipe bounce; overflow-x: hidden stops any sideways page drift.
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* No horizontal rubber-band on the root scroller. */
  overscroll-behavior-x: none;
}
html, body {
  /* Keep page zoom, vertical scroll and the inner horizontal rails. */
  touch-action: pan-x pan-y pinch-zoom;
  /* Clip any sideways overflow WITHOUT creating a scroll container (which
     overflow-x: hidden would, breaking the sticky navbar + tab strip). clip
     leaves overflow-y visible, so position: sticky keeps working. */
  overflow-x: clip;
}

/* ============================================================
   NO TEXT / IMAGE SELECTION (portal-only; native-app feel). The iOS app
   loads this page as a remote URL, so long-pressing text or artwork must NOT
   pop the web callout menus (Copy / Look Up / Translate / Share / Save to
   Photos / Copy Subject), and dragging must never lift an image or start a
   text selection. We disable selection + the touch callout + image drag
   globally, then RE-ENABLE genuine typing surfaces (phone / OTP / service
   notes / date inputs) so the member can still enter and edit + paste text.
   -webkit-tap-highlight-color is already transparent on controls in the
   shared sheet; this only removes the SELECTION affordances, not taps.
   ============================================================ */
html {
  -webkit-user-select: none;
  user-select: none;
  /* Kill the long-press callout menu on links, text and images. */
  -webkit-touch-callout: none;
}
/* Images are also non-draggable (no drag-to-lift / ghost image). */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
/* Real editable fields stay fully selectable, editable and paste-able so the
   phone number, the OTP code, service notes and the preferred date still work
   like normal inputs (WebKit otherwise blocks caret + selection inside a
   user-select:none subtree). */
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ============================================================
   NO SCROLLBARS anywhere (scrolling still works) - a cleaner, native feel
   across the page AND every inner scroller (sheets, rails, tables, panels).
   ============================================================ */
* {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge / IE */
}
*::-webkit-scrollbar {            /* Safari / Chrome / iOS WKWebView */
  width: 0; height: 0; display: none;
}

/* ============================================================
   APPLE WALLET (portal-only; never appears on the register page)
   The control is mounted under the membership card only after the
   readiness probe succeeds, so this styling targets a button that is
   only ever present when the backend can mint a pass.
   ============================================================ */
.wallet-holder {
  display: flex;
  justify-content: center;
  margin: var(--s-6) auto 0;
  min-height: 0;
}
.wallet-holder:empty { margin: 0; }

/* Official "Add to Apple Wallet" styling: black rounded badge, white text,
   two-line "Add to / Apple Wallet" lockup beside the Apple glyph. */
.wallet-badge {
  display: inline-flex;
  align-items: center;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity 160ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
/* Apple's OFFICIAL "Add to Apple Wallet" badge artwork (the whole badge is the
   SVG: black pill + Apple logo + SF text). A soft shadow lifts it off the cream. */
.wallet-badge-img {
  display: block;
  height: 48px; width: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.wallet-badge:hover { opacity: 0.9; }
.wallet-badge:active { transform: scale(0.98); }
/* While minting the pass, the full-page brand PAGE LOADER (ring + star) is
   shown over everything; the button just dims + locks to prevent re-taps. */
.wallet-badge.is-busy { opacity: 0.55; pointer-events: none; }
.wallet-badge-inner { display: inline-flex; align-items: center; gap: 9px; }
.wallet-glyph { width: 22px; height: 22px; display: block; color: #fff; }
.wallet-badge-text {
  display: flex; flex-direction: column;
  align-items: flex-start; line-height: 1.05;
  text-align: start;
}
[dir="rtl"] .wallet-badge-text { align-items: flex-end; }
.wallet-badge-add {
  font-size: 9.5px; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82);
  text-transform: none;
}
.wallet-badge-name {
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  /* Apple Wallet is a product name - keep it LTR even under dir=rtl. */
  direction: ltr; unicode-bidi: isolate;
}

/* ============================================================
   TOAST (portal-only quiet notice, e.g. Wallet unavailable)
   ============================================================ */
.toast-host {
  position: fixed;
  z-index: 9500;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  transform: translate(-50%, 12px);
  max-width: min(88vw, 420px);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--pm-surface-2);
  border: 1px solid var(--pm-hairline-strong);
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 12px 32px rgba(20,12,2,0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.toast-host.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .toast-host { transition: opacity 240ms ease; }
}