/* Banrox Shield (assets/lp/js/bx-shield.js): the ring button in the bottom-left corner and its sheet.
   The button is the one thing here that is on screen before the kit stylesheets load, so it carries
   its own glass; the sheet sits inside .bxc and uses the kit's type, X and gate. Palette: the brand
   blue family for the rings, green only for a closed ring. */

.bxs-fab { position: fixed; left: 24px; bottom: 24px; z-index: 19; display: flex; align-items: center; gap: 10px;
  height: 56px; min-width: 56px; max-width: 56px; padding: 0 8px; border: none; border-radius: 999px; overflow: hidden; white-space: nowrap;
  cursor: pointer; color: #FFFFFF; font: 500 15px/1 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: -0.01em;
  background: radial-gradient(120% 70% at 50% 0%, rgba(38, 75, 255, .22) 0%, rgba(38, 75, 255, 0) 62%), rgba(9, 12, 33, .92);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .10), inset 0 4px 20px rgba(255, 255, 255, .08), 0 18px 40px -14px rgba(0, 0, 0, .7), 0 12px 32px -14px rgba(38, 75, 255, .45);
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  transition: max-width .45s cubic-bezier(.2, .8, .2, 1), transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }
.bxs-fab[hidden] { display: none; }
.bxs-fab__ring { flex: none; display: block; width: 40px; height: 40px; }
.bxs-fab__svg { display: block; }
.bxs-fab__svg circle[data-ring], .bxs-rings__svg circle[data-ring] { transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1), stroke .3s ease, opacity .2s ease; }
.bxs-fab__txt { opacity: 0; padding-right: 10px; transition: opacity .18s ease; }
.bxs-fab.is-island { max-width: 280px; }
.bxs-fab.is-island .bxs-fab__txt { opacity: 1; transition-delay: .12s; }
.bxs-fab:hover { transform: translateY(-2px); }
.bxs-fab:active { transform: translateY(1px) scale(.98); transition-duration: 75ms; }
.bxs-fab:focus-visible { outline: 2px solid #8585E9; outline-offset: 3px; }
.bxs-fab.is-rising { animation: bxs-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.bxs-fab.is-pulse .bxs-fab__ring { animation: bxs-pulse .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes bxs-rise { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes bxs-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* one surface at a time: while the waitlist sheet or a moment's modal is up, the button steps aside */
body:has(.bxc-overlay:not([hidden])) .bxs-fab { opacity: 0; pointer-events: none; }
.bxs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the sheet: a popover over the button on a computer, a bottom sheet on a phone */
.bxs-backdrop { position: fixed; inset: 0; z-index: 22; background: rgba(8, 8, 20, .5); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.bxs-sheet { position: fixed; z-index: 23; left: 24px; bottom: 92px; width: 440px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 24px; padding: 24px; opacity: 0; transform: translateY(12px) scale(.96); transform-origin: 28px calc(100% + 40px);
  transition: opacity .22s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.bxs-sheet.is-in { opacity: 1; transform: none; }
.bxs-sheet:focus { outline: none; }
.bxs-sheet .bxc-x { top: 12px; right: 12px; }
.bxs-head { padding-right: 48px; }
.bxs-head .bxc-small { margin-top: 4px; }
.bxs-hero { display: flex; align-items: center; gap: 28px; margin: 18px 0; }
.bxs-rings { position: relative; flex: none; width: 144px; height: 144px; }
.bxs-rings__svg { display: block; width: 100%; height: 100%; }
.bxs-count { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.bxs-count b { font-size: 28px; line-height: 1; color: #FFFFFF; }
.bxs-count span { margin-top: 4px; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .5); }
.bxs-legend { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bxs-leg { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; color: rgba(255, 255, 255, .8); }
.bxs-leg i { width: 10px; height: 10px; border-radius: 50%; }
.bxs-leg b { font-size: 17px; color: #FFFFFF; }
.bxs-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.bxs-list li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.bxs-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 12px 12px 16px; color: #FFFFFF; text-decoration: none; transition: background .2s ease; }
a.bxs-row:hover { background: rgba(255, 255, 255, .05); }
a.bxs-row:active { background: rgba(255, 255, 255, .09); }
a.bxs-row:focus-visible { outline: 2px solid #8585E9; outline-offset: -2px; border-radius: 16px; }
.bxs-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.bxs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bxs-txt b { font-weight: 500; font-size: 15px; line-height: 20px; }
.bxs-txt small { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .55); }
.bxs-next { font-style: normal; font-weight: 500; color: #B9C3FF; margin-right: 6px; }
.bxs-go { flex: none; width: 20px; height: 20px; color: rgba(255, 255, 255, .4); }
.bxs-pts { flex: none; padding: 6px 9px; border-radius: 999px; font: 500 13px/1 'Inter Tight', 'Inter', system-ui, sans-serif; color: #B9C3FF; background: rgba(133, 133, 233, .14); }
.bxs-ok { flex: none; width: 22px; height: 22px; color: #7BD394; }
.bxs-go svg, .bxs-ok svg { width: 100%; height: 100%; display: block; }
.bxs-row.is-closed b { color: #7BD394; }
.bxs-foot { margin-top: 14px; }
.bxs-sheet .bxg { margin-top: 0; }

@media (max-width: 600px) {
  .bxs-fab { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 52px; min-width: 52px; max-width: 52px; padding: 0 6px; }
  .bxs-fab.is-island { max-width: 240px; }
  /* the capsule owns the foot of a phone: the button rides above it; a corner card or the open sheet hides it */
  body:has(.bxc-capsule:not([hidden])) .bxs-fab { transform: translateY(-80px); }
  body:has(.bxc-corner) .bxs-fab, html.bxs-open .bxs-fab { opacity: 0; pointer-events: none; }
  .bxs-fab.is-tucked { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }
  .bxs-backdrop.is-in { opacity: 1; pointer-events: auto; }
  .bxs-sheet { left: 0; right: 0; bottom: 0; width: auto; max-height: 88vh; border-radius: 24px 24px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transform-origin: 50% 100%; }
  .bxs-sheet .bxc-x { top: 10px; right: 10px; }
  .bxs-hero { gap: 18px; margin: 16px 0; }
  .bxs-rings { width: 136px; height: 136px; }
  .bxs-count b { font-size: 26px; }
  html.bxs-open, html.bxs-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .bxs-fab, .bxs-fab__txt, .bxs-sheet, .bxs-backdrop, .bxs-fab__svg circle[data-ring], .bxs-rings__svg circle[data-ring] { transition: none !important; animation: none !important; }
}