/* KFF — style Astra #ast-scroll-top like prototype + circular scroll progress ring */
#ast-scroll-top{
  --kff-sage:#9FB7A7;
  --kff-gold:#C2A36B;
  --kff-charcoal:#3A3A3A;
  --kff-ring-width:3px;
  --kff-scroll-pct:0%;

  position:fixed !important;
  bottom:2rem !important; /* 32px */
  right:2rem !important;
  left:auto !important;
  z-index:900 !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  border-radius:50% !important;
  background:conic-gradient(
    from -90deg,
    var(--kff-charcoal) var(--kff-scroll-pct),
    rgba(58,58,58,0.22) 0
  ) !important;
  color:var(--kff-charcoal) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:none !important;
  outline:none !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  box-shadow:0 8px 20px rgba(58,58,58,0.18) !important;
  transition:transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  text-decoration:none !important;
  overflow:visible !important;
  isolation:isolate !important;
}

/* Inner sage face (46px) */
#ast-scroll-top::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:var(--kff-ring-width) !important;
  border-radius:50% !important;
  background:var(--kff-sage) !important;
  z-index:0 !important;
  transition:background 0.3s ease, background-color 0.3s ease !important;
  pointer-events:none !important;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus{
  color:var(--kff-charcoal) !important;
  transform:translateY(-3px) !important;
  box-shadow:0 12px 26px rgba(58,58,58,0.24) !important;
  outline:none !important;
}

#ast-scroll-top:hover::before,
#ast-scroll-top:focus::before{
  background:var(--kff-gold) !important;
  background-color:var(--kff-gold) !important;
}

/* Hide Astra extras that conflict with our ring */
#ast-scroll-top::after{
  display:none !important;
  content:none !important;
}

#ast-scroll-top > svg,
#ast-scroll-top svg.ast-scroll-top-progress,
#ast-scroll-top .ast-scroll-top-progress{
  display:none !important;
}

/* Prototype stroke arrow */
#ast-scroll-top .ast-icon{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  transform:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233A3A3A' stroke-width='2'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
}

#ast-scroll-top .ast-icon svg,
#ast-scroll-top .ast-arrow-svg{
  display:none !important;
}

#ast-scroll-top .screen-reader-text{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (prefers-reduced-motion: reduce){
  #ast-scroll-top{
    transition:box-shadow 0.3s ease !important;
  }
  #ast-scroll-top:hover,
  #ast-scroll-top:focus{
    transform:none !important;
  }
}
