/* Liquid glass floating action buttons */
.site-fab-dock{
  position:fixed;
  z-index:2400;
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
}
.site-fab-bottom-right{right:22px;bottom:22px;align-items:flex-end}
.site-fab-bottom-left{left:22px;bottom:22px;align-items:flex-start}
.site-fab-top-right{right:22px;top:calc(var(--header-height, 88px) + 18px);align-items:flex-end}
.site-fab-top-left{left:22px;top:calc(var(--header-height, 88px) + 18px);align-items:flex-start}

.site-fab-item{
  --fab-accent:#3A7BD5;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0;
  pointer-events:auto;
  text-decoration:none;
  color:#fff;
  isolation:isolate;
}
.site-fab-bottom-right .site-fab-item,
.site-fab-top-right .site-fab-item{flex-direction:row}
.site-fab-bottom-left .site-fab-item,
.site-fab-top-left .site-fab-item{flex-direction:row-reverse}

.site-fab-btn{
  position:relative;
  z-index:2;
  width:58px;height:58px;
  border-radius:50%;
  display:grid;place-items:center;
  color:#fff;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--fab-accent) 72%, #fff), color-mix(in srgb, var(--fab-accent) 88%, #0b1524)),
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    0 16px 36px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in srgb, var(--fab-accent) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -8px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.site-fab-btn svg{width:24px;height:24px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.site-fab-btn::before{
  content:"";
  position:absolute;inset:3px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.45), transparent 52%);
  pointer-events:none;
}

.site-fab-label{
  position:relative;
  z-index:1;
  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
  padding:0;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border:1px solid transparent;
  box-shadow:none;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  transform:translateX(8px);
  transition:
    max-width .32s cubic-bezier(.2,.8,.2,1),
    opacity .24s ease,
    padding .28s ease,
    margin .28s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    background .24s ease;
}
.site-fab-bottom-left .site-fab-label,
.site-fab-top-left .site-fab-label{transform:translateX(-8px)}

.site-fab-item:hover .site-fab-btn,
.site-fab-item:focus-visible .site-fab-btn,
.site-fab-item.is-preview:hover .site-fab-btn{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 20px 42px rgba(0,0,0,.32),
    0 0 0 4px color-mix(in srgb, var(--fab-accent) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.site-fab-item:hover .site-fab-label,
.site-fab-item:focus-visible .site-fab-label,
.site-fab-item.is-preview:hover .site-fab-label{
  max-width:220px;
  opacity:1;
  padding:11px 16px;
  margin:0 10px;
  border-color:rgba(255,255,255,.35);
  box-shadow:0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--fab-accent) 55%, rgba(12,20,34,.72)), color-mix(in srgb, var(--fab-accent) 30%, rgba(8,14,24,.78)));
  transform:translateX(0);
}

@media (hover:none){
  .site-fab-item:focus-visible .site-fab-label{
    max-width:220px;opacity:1;padding:11px 16px;margin:0 10px;transform:none
  }
}

@media (max-width:720px){
  .site-fab-bottom-right,.site-fab-bottom-left{bottom:16px}
  .site-fab-bottom-right{right:14px}
  .site-fab-bottom-left{left:14px}
  .site-fab-top-right{right:14px}
  .site-fab-top-left{left:14px}
  .site-fab-btn{width:52px;height:52px}
  .site-fab-btn svg{width:22px;height:22px}
  .site-fab-dock{gap:10px}
}