/* FlashPrice liquid-glass tab bar (iOS 26 style). Pair with tabbar.js. */
.fp-tabs {
  --fp-tabs-h: 64px;            /* bar height */
  --fp-tabs-w: min(calc(100vw - 32px), 344px);
  --fp-tabs-pad: 4px;           /* gap between bar edge and the active pill */
  --fp-tabs-gap: 16px;          /* distance from the bottom edge */
  --fp-tabs-bg: rgba(16, 27, 32, .62);
  --fp-tabs-tint: rgba(59, 180, 228, .16);
  --fp-tabs-rim: #3bb4e4;
  --fp-tabs-on: #f5d443;        /* active icon */
  --fp-tabs-text: #fff;         /* active label */
  --fp-tabs-off: rgba(226, 240, 245, .66);
  --fp-tabs-font: "Onest", system-ui, sans-serif;
  --fp-tabs-n: 2;
  position: fixed; z-index: 55; left: 0; right: 0; margin: 0 auto;
  bottom: calc(var(--fp-tabs-gap) + env(safe-area-inset-bottom, 0px));
  width: var(--fp-tabs-w);
  font-family: var(--fp-tabs-font);
  -webkit-tap-highlight-color: transparent;
  /* hidden until tabbar.js decides (it shows the bar after the hero). Without JS it appears after 3s. */
  visibility: hidden; pointer-events: none;
  animation: fp-tabs-nojs 0s 3s forwards;
}
.fp-tabs.is-ready { animation: none; }
.fp-tabs.is-shown { visibility: visible; pointer-events: auto; }
@keyframes fp-tabs-nojs { to { visibility: visible; pointer-events: auto; } }
@media (min-width: 768px) { .fp-tabs { --fp-tabs-h: 68px; --fp-tabs-w: 372px; --fp-tabs-gap: 22px; } }
/* keeps the page's last content clear of the bar while it is visible (class toggled by tabbar.js) */
body.has-tabbar { padding-bottom: calc(var(--fp-tabs-space, 96px) + env(safe-area-inset-bottom, 0px)); }

.fp-tabs__bar {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(var(--fp-tabs-n), 1fr);
  height: var(--fp-tabs-h); padding: var(--fp-tabs-pad);
  border-radius: 999px;
  background: var(--fp-tabs-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 12px 32px -6px rgba(0, 0, 0, .6),
    0 2px 8px rgba(0, 0, 0, .3);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
/* gradient hairline border: lit top-right / bottom-left, dark in the middle (like the reference stroke) */
.fp-tabs__bar::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(to bottom left, rgba(59, 180, 228, .6), rgba(255, 255, 255, .07) 35%, rgba(255, 255, 255, .03) 65%, rgba(59, 180, 228, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* glow that floods the bar while the pill travels */
.fp-tabs__glow { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; opacity: 0; pointer-events: none; }
.fp-tabs__glow i {
  position: absolute; top: -40%; bottom: -40%; left: 0;
  width: calc(100% / var(--fp-tabs-n));
  background: radial-gradient(closest-side, rgba(59, 180, 228, .75), rgba(23, 110, 190, .35) 55%, transparent);
  filter: blur(6px);
}

/* the active pill */
.fp-tabs__thumb {
  position: absolute; z-index: 1; pointer-events: none;
  top: var(--fp-tabs-pad); bottom: var(--fp-tabs-pad); left: var(--fp-tabs-pad);
  width: calc((100% - 2 * var(--fp-tabs-pad)) / var(--fp-tabs-n));
  border-radius: 999px;
  translate: calc(var(--fp-i, 0) * 100%) 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(59, 180, 228, 0), 0 0 0 0 rgba(59, 180, 228, 0);
  transition: scale .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s;
  will-change: translate, scale;
}
.fp-tabs__thumb i {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%), var(--fp-tabs-tint);
  transition: opacity .3s;
}
.fp-tabs[data-active="giveaway"] { --fp-i: 1; }   /* pre-JS placement, no jump on load */

/* lifted state while dragging */
.fp-tabs.is-drag .fp-tabs__thumb { scale: 1.12 1.2; transition: scale .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px var(--fp-tabs-rim), 0 0 18px 0 rgba(59, 180, 228, .35); }
.fp-tabs.is-drag .fp-tabs__thumb i { opacity: .12; }
.fp-tabs.is-drag .fp-tabs__glow { opacity: .8; transition: opacity .2s; }

/* tabs */
.fp-tabs__tab {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; border-radius: 999px;
  color: var(--fp-tabs-off); text-decoration: none;
  font-size: 12px; font-weight: 600; line-height: 1.1; letter-spacing: .01em;
  transition: color .22s ease .06s;
  -webkit-touch-callout: none;
}
.fp-tabs__label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.fp-tabs__icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: color .22s ease .06s, transform .3s cubic-bezier(.3, 1.6, .5, 1), filter .3s;
}
.fp-tabs__icon .fp-f { fill: currentColor; fill-opacity: 0; transition: fill-opacity .22s ease .06s; }
.fp-tabs__icon .fp-c { transition: stroke .22s ease .06s; }
.fp-tabs__tab[aria-selected="true"] { color: var(--fp-tabs-text); }
.fp-tabs__tab[aria-selected="true"] .fp-tabs__icon { color: var(--fp-tabs-on); filter: drop-shadow(0 0 6px rgba(245, 212, 67, .45)); }
.fp-tabs__tab[aria-selected="true"] .fp-f { fill-opacity: 1; }
.fp-tabs__tab[aria-selected="true"] .fp-c { stroke: #0f191d; }
@media (hover: hover) { .fp-tabs__tab:hover { color: #fff; } }
.fp-tabs__tab:active .fp-tabs__icon, .fp-tabs__tab:active .fp-tabs__label { transform: scale(.92); }
.fp-tabs__label { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.fp-tabs__tab:focus { outline: none; }
.fp-tabs__tab:focus-visible { outline: 2px solid var(--fp-tabs-on); outline-offset: -2px; }

@media (max-width: 359px) { .fp-tabs__tab { font-size: 11px; } }

@media (prefers-reduced-motion: reduce) {
  .fp-tabs *, .fp-tabs *::before { transition: none !important; }
}