/* WAREXT_V0708_FLOATING_QUICK_MENU
   Radial quick menu inspired by the supplied Uiverse interaction pattern. */

.floating-quick-menu{
  --fq-size:56px;
  --fq-action-size:46px;
  --fq-surface:linear-gradient(145deg,rgba(108,83,235,.98),rgba(54,147,221,.96));
  --fq-item:linear-gradient(180deg,rgba(18,24,45,.98),rgba(10,15,30,.99));
  position:fixed;
  right:24px;
  bottom:28px;
  z-index:2147482500;
  width:var(--fq-size);
  height:var(--fq-size);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.floating-quick-menu__toggle,
.floating-quick-menu__action{
  appearance:none;
  border:0;
  font:inherit;
  color:#f7f8ff;
  cursor:pointer;
  text-decoration:none;
}

.floating-quick-menu__toggle{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  place-items:center;
  width:var(--fq-size);
  height:var(--fq-size);
  padding:0;
  border:1px solid rgba(191,199,255,.30);
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 24%,rgba(255,255,255,.18),transparent 32%),
    var(--fq-surface);
  box-shadow:
    0 12px 28px rgba(3,7,20,.32),
    0 0 22px rgba(103,89,234,.18),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease;
}

.floating-quick-menu__toggle:hover,
.floating-quick-menu__toggle:focus-visible{
  border-color:rgba(218,224,255,.48);
  box-shadow:
    0 14px 32px rgba(3,7,20,.36),
    0 0 27px rgba(112,93,240,.25),
    inset 0 1px 0 rgba(255,255,255,.24);
  outline:none;
}

.floating-quick-menu.is-open .floating-quick-menu__toggle{
  transform:none;
}

.floating-quick-menu__toggle-icon{
  display:block;
  width:25px;
  height:25px;
  transform:rotate(0deg) scale(1);
  transform-origin:center;
  transition:transform .46s cubic-bezier(.2,.72,.22,1),opacity .24s ease;
}
.floating-quick-menu__toggle-icon svg{
  display:block;
  width:25px;
  height:25px;
}
.floating-quick-menu.is-open .floating-quick-menu__toggle-icon{
  transform:rotate(45deg) scale(.92);
  opacity:.94;
}

.floating-quick-menu__items{
  position:absolute;
  inset:0;
  z-index:1;
  margin:0;
  padding:0;
  list-style:none;
  pointer-events:none;
}

.floating-quick-menu__item{
  --fq-x:0px;
  --fq-y:0px;
  position:absolute;
  top:5px;
  left:5px;
  width:var(--fq-action-size);
  height:var(--fq-action-size);
  opacity:0;
  transform:translate3d(0,0,0) scale(.56);
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    opacity .20s ease;
  transition-delay:calc(var(--fq-i,0) * 36ms);
}

.floating-quick-menu[data-items="3"] .floating-quick-menu__item--top{--fq-x:5px;--fq-y:-92px;--fq-i:0}
.floating-quick-menu[data-items="3"] .floating-quick-menu__item--home{--fq-x:-64px;--fq-y:-66px;--fq-i:1}
.floating-quick-menu[data-items="3"] .floating-quick-menu__item--support{--fq-x:-94px;--fq-y:2px;--fq-i:2}

.floating-quick-menu[data-items="4"] .floating-quick-menu__item--top{--fq-x:4px;--fq-y:-102px;--fq-i:0}
.floating-quick-menu[data-items="4"] .floating-quick-menu__item--home{--fq-x:-54px;--fq-y:-87px;--fq-i:1}
.floating-quick-menu[data-items="4"] .floating-quick-menu__item--support{--fq-x:-88px;--fq-y:-48px;--fq-i:2}
.floating-quick-menu[data-items="4"] .floating-quick-menu__item--live{--fq-x:-102px;--fq-y:5px;--fq-i:3}

.floating-quick-menu.is-open .floating-quick-menu__items{
  pointer-events:auto;
}

.floating-quick-menu.is-open .floating-quick-menu__item{
  opacity:1;
  transform:translate3d(var(--fq-x),var(--fq-y),0) scale(1);
}

.floating-quick-menu__action{
  position:relative;
  display:grid;
  place-items:center;
  width:var(--fq-action-size);
  height:var(--fq-action-size);
  padding:0;
  border:1px solid rgba(151,163,220,.19);
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.055),transparent 34%),
    var(--fq-item);
  box-shadow:
    0 10px 22px rgba(2,5,16,.28),
    inset 0 1px 0 rgba(255,255,255,.045);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.floating-quick-menu__action svg{
  width:22px;
  height:22px;
  display:block;
}

.floating-quick-menu__action:hover,
.floating-quick-menu__action:focus-visible{
  transform:translateY(-2px) scale(1.045);
  border-color:rgba(164,150,239,.42);
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.075),transparent 34%),
    linear-gradient(180deg,rgba(33,38,68,.99),rgba(16,21,42,.995));
  box-shadow:
    0 12px 26px rgba(2,5,16,.34),
    0 0 18px rgba(116,96,234,.11),
    inset 0 1px 0 rgba(255,255,255,.06);
  outline:none;
}

.floating-quick-menu__action--live{
  border-color:rgba(72,202,156,.23);
}

.floating-quick-menu__action--live:hover,
.floating-quick-menu__action--live:focus-visible{
  border-color:rgba(90,222,173,.40);
  box-shadow:
    0 12px 26px rgba(2,5,16,.34),
    0 0 18px rgba(55,194,143,.12),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.floating-quick-menu__action::after{
  content:attr(data-label);
  position:absolute;
  top:50%;
  right:calc(100% + 10px);
  translate:0 -50%;
  width:max-content;
  max-width:150px;
  padding:6px 9px;
  border:1px solid rgba(142,151,199,.14);
  border-radius:9px;
  background:rgba(7,11,23,.96);
  box-shadow:0 8px 20px rgba(1,4,13,.26);
  color:rgba(242,245,255,.92);
  font-size:.72rem;
  font-weight:750;
  line-height:1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s linear;
}

.floating-quick-menu__action:hover::after,
.floating-quick-menu__action:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

@media(max-width:991px){
  .floating-quick-menu{
    --fq-size:52px;
    --fq-action-size:44px;
    right:16px;
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
  }
  .floating-quick-menu[data-items="3"] .floating-quick-menu__item--top{--fq-x:4px;--fq-y:-86px}
  .floating-quick-menu[data-items="3"] .floating-quick-menu__item--home{--fq-x:-59px;--fq-y:-62px}
  .floating-quick-menu[data-items="3"] .floating-quick-menu__item--support{--fq-x:-88px;--fq-y:1px}
  .floating-quick-menu[data-items="4"] .floating-quick-menu__item--top{--fq-x:4px;--fq-y:-94px}
  .floating-quick-menu[data-items="4"] .floating-quick-menu__item--home{--fq-x:-50px;--fq-y:-81px}
  .floating-quick-menu[data-items="4"] .floating-quick-menu__item--support{--fq-x:-81px;--fq-y:-44px}
  .floating-quick-menu[data-items="4"] .floating-quick-menu__item--live{--fq-x:-94px;--fq-y:4px}
  .floating-quick-menu__action::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  .floating-quick-menu__toggle,
  .floating-quick-menu__item,
  .floating-quick-menu__action{
    transition:none!important;
  }
}


/* WAREXT_V0709_FLOATING_QUICK_MENU_VIEWPORT_FIX
   Root fix for the left-edge clipping seen in production. */
html body:not(.admin-body) > .floating-quick-menu{
  position:fixed!important;
  inset:auto max(22px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) auto!important;
  top:auto!important;
  left:auto!important;
  right:max(22px,env(safe-area-inset-right,0px))!important;
  bottom:max(24px,env(safe-area-inset-bottom,0px))!important;
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
  clear:none!important;
  translate:none!important;
  transform:none!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  contain:layout style!important;
  direction:ltr!important;
  isolation:isolate!important;
  z-index:2147482500!important;
}
html body:not(.admin-body) > .floating-quick-menu > .floating-quick-menu__toggle{
  position:absolute!important;
  inset:0!important;
  margin:0!important;
  transform-origin:center!important;
}
html body:not(.admin-body) > .floating-quick-menu > .floating-quick-menu__items{
  position:absolute!important;
  inset:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
html body:not(.admin-body) > .floating-quick-menu.is-open .floating-quick-menu__toggle{
  transform:none!important;
}

/* Desktop: all actions open into the viewport, away from the right/bottom edge. */
html body:not(.admin-body) > .floating-quick-menu[data-items="3"] .floating-quick-menu__item--top{--fq-x:5px;--fq-y:-92px}
html body:not(.admin-body) > .floating-quick-menu[data-items="3"] .floating-quick-menu__item--home{--fq-x:-62px;--fq-y:-68px}
html body:not(.admin-body) > .floating-quick-menu[data-items="3"] .floating-quick-menu__item--support{--fq-x:-94px;--fq-y:-2px}

html body:not(.admin-body) > .floating-quick-menu[data-items="4"] .floating-quick-menu__item--top{--fq-x:5px;--fq-y:-102px}
html body:not(.admin-body) > .floating-quick-menu[data-items="4"] .floating-quick-menu__item--home{--fq-x:-54px;--fq-y:-88px}
html body:not(.admin-body) > .floating-quick-menu[data-items="4"] .floating-quick-menu__item--support{--fq-x:-90px;--fq-y:-49px}
html body:not(.admin-body) > .floating-quick-menu[data-items="4"] .floating-quick-menu__item--live{--fq-x:-104px;--fq-y:3px}

@media(max-width:991px){
  html body:not(.admin-body) > .floating-quick-menu{
    inset:auto max(14px,env(safe-area-inset-right,0px)) calc(86px + env(safe-area-inset-bottom,0px)) auto!important;
    right:max(14px,env(safe-area-inset-right,0px))!important;
    bottom:calc(86px + env(safe-area-inset-bottom,0px))!important;
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    min-height:52px!important;
    max-height:52px!important;
  }
  html body:not(.admin-body) > .floating-quick-menu[data-items="3"] .floating-quick-menu__item--top{--fq-x:4px;--fq-y:-86px}
  html body:not(.admin-body) > .floating-quick-menu[data-items="3"] .floating-quick-menu__item--home{--fq-x:-58px;--fq-y:-63px}
  html body:not(.admin-body) > .floating-quick-menu[data-items="3"] .floating-quick-menu__item--support{--fq-x:-88px;--fq-y:0px}
  html body:not(.admin-body) > .floating-quick-menu[data-items="4"] .floating-quick-menu__item--top{--fq-x:4px;--fq-y:-94px}
  html body:not(.admin-body) > .floating-quick-menu[data-items="4"] .floating-quick-menu__item--home{--fq-x:-50px;--fq-y:-82px}
  html body:not(.admin-body) > .floating-quick-menu[data-items="4"] .floating-quick-menu__item--support{--fq-x:-82px;--fq-y:-45px}
  html body:not(.admin-body) > .floating-quick-menu[data-items="4"] .floating-quick-menu__item--live{--fq-x:-95px;--fq-y:3px}
}