/* ==========================================================================
   SmmDad — installed-app shell
   --------------------------------------------------------------------------
   Everything here is gated behind `html.is-standalone`, a class fs-pwa.js sets
   only when the app is actually running installed. In a browser tab none of it
   applies, so the site keeps its normal chrome and nothing regresses.
   ========================================================================== */

/* ---- splash -------------------------------------------------------------- */
/* Covers the first paint so the launch never shows a white flash or a
   half-styled page. Removed by fs-pwa.js once the document is ready. */
.fs-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: linear-gradient(168deg, #1e40af 0%, #2563eb 55%, #1d4ed8 100%);
  opacity: 1;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fs-splash.is-out { opacity: 0; pointer-events: none; }
.fs-splash__mark {
  width: 84px; height: 84px;
  border-radius: 22px;
  animation: fs-splash-in 620ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.fs-splash__name {
  margin-top: 1rem;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: #fff;
  animation: fs-splash-in 620ms 90ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* a thin indeterminate bar — reads as progress without claiming a percentage */
.fs-splash__bar {
  position: absolute; left: 50%; bottom: 4.5rem;
  width: 128px; height: 3px; margin-left: -64px;
  border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.14);
}
.fs-splash__bar::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #93c5fd, transparent);
  transform: translate3d(-100%, 0, 0);
  animation: fs-splash-sweep 1.1s linear infinite;
}
@keyframes fs-splash-in {
  from { opacity: 0; transform: scale(.86) translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fs-splash-sweep { to { transform: translate3d(200%, 0, 0); } }

/* ---- standalone layout --------------------------------------------------- */
html.is-standalone body {
  /* clear the bottom bar plus the home-indicator inset on iOS */
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Marketing chrome is noise inside an installed app — the user already chose
   the product, so the footer and the public nav come off. */
html.is-standalone #fs-footer,
html.is-standalone .fs-nav2,
html.is-standalone #fs-cta { display: none !important; }

/* ---- bottom navigation --------------------------------------------------- */
.fs-tabbar { display: none; }
html.is-standalone .fs-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid rgba(15, 23, 42, .10);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html.is-standalone .fs-tabbar {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
  }
}

.fs-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 58px;                 /* comfortable thumb target */
  padding: .4rem .2rem;
  color: #64748b;
  font-size: .66rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fs-tab svg { width: 22px; height: 22px; }
.fs-tab:active { color: #1e40af; }
.fs-tab.is-on { color: #2563eb; }

/* the active pill sits behind the icon and scales in, so switching tabs reads
   as movement rather than a colour swap */
.fs-tab::before {
  content: ''; position: absolute; top: 6px;
  width: 42px; height: 26px; border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  transform: scale(.6); opacity: 0;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms linear;
}
.fs-tab.is-on::before { transform: scale(1); opacity: 1; }

/* a badge for unread tickets / pending orders, if the markup supplies one */
.fs-tab__dot {
  position: absolute; top: 8px; right: 50%; margin-right: -16px;
  min-width: 8px; height: 8px; border-radius: 999px;
  background: #ef4444; border: 2px solid #ffffff;
}

/* ---- native feel --------------------------------------------------------- */
html.is-standalone {
  /* no rubber-band overscroll revealing the page behind the app */
  overscroll-behavior-y: none;
}
html.is-standalone body {
  /* text selection and long-press callouts are browser behaviours, not app
     ones — inputs keep both, everything else drops them */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
html.is-standalone input,
html.is-standalone textarea,
html.is-standalone [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* ---- page transition ----------------------------------------------------- */
/* A short fade on navigation so pages arrive instead of flashing. Paired with
   fs-pwa.js, which holds the outgoing page for one frame before following the
   link — long enough to read as a transition, short enough not to feel slow. */
html.is-standalone .fs-page-fade { animation: fs-page-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
html.is-standalone.is-leaving .fs-page-fade { opacity: 0; transition: opacity 130ms linear; }
@keyframes fs-page-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fs-splash__mark, .fs-splash__name { animation: none; }
  .fs-splash__bar::after { animation-duration: 3s; }
  html.is-standalone .fs-page-fade { animation: none; }
  .fs-tab::before { transition: opacity 160ms linear; transform: scale(1); }
}

/* The theme ships a dark scheme; the bar and splash follow it rather than
   staying light against a dark page. */
@media (prefers-color-scheme: dark) {
  html.is-standalone .fs-tabbar { background: rgba(15, 23, 42, .94); border-top-color: rgba(255, 255, 255, .10); }
  @supports (backdrop-filter: blur(1px)) {
    html.is-standalone .fs-tabbar { background: rgba(15, 23, 42, .76); }
  }
  .fs-tab { color: #94a3b8; }
  .fs-tab.is-on { color: #93c5fd; }
  .fs-tab::before { background: rgba(147, 197, 253, .16); }
  .fs-tab__dot { border-color: #0f172a; }
}