#scrollUpButton {
  --scrollup-color: var(--bs-primary);
  --scrollup-hover-color: var(--bs-secondary);
  --scrollup-progress: 0%;
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: var(--scrollup-color);
  color: #fff;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background-color .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  cursor: pointer;
}

#scrollUpButton.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollUpButton:hover {
  background: var(--scrollup-hover-color);
}

#scrollUpButton:focus-visible {
  outline: 3px solid var(--bs-focus-ring-color, rgba(13,110,253,.5));
  outline-offset: 3px;
}

#scrollUpButton::after {
  font-family: FontAwesome;
  font-size: 1.5em;
  font-style: normal;
  font-weight: normal;
}

#scrollUpButton[data-icon="chevron-up"]::after { content: "\f077"; }
#scrollUpButton[data-icon="arrow-up"]::after { content: "\f062"; }
#scrollUpButton[data-icon="angle-up"]::after { content: "\f106"; }
#scrollUpButton[data-icon="double-up"]::after { content: "\f102"; }

#scrollUpButton.scrollup-size-small { width: 40px; height: 40px; }
#scrollUpButton.scrollup-size-large { width: 62px; height: 62px; }
#scrollUpButton.scrollup-shape-circle { border-radius: 50%; }
#scrollUpButton.scrollup-shape-rounded { border-radius: 10px; }
#scrollUpButton.scrollup-shape-square { border-radius: 0; }

#scrollUpButton.scrollup-shape-pill {
  border-radius: 999px;
  width: 54px;
}

#scrollUpButton.scrollup-progress {
  background: conic-gradient(var(--scrollup-hover-color) var(--scrollup-progress), var(--scrollup-color) 0);
}

/* --- CENTER POSITION SPECIFIC OVERRIDES --- */
#scrollUpButton[data-position="center"] {
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, 10px); /* Merges centering with entrance slide-start */
}

#scrollUpButton[data-position="center"].show {
  transform: translate(-50%, 0); /* Merges centering with entrance slide-stop */
}

@media (max-width: 767px) {
  /* Only snap non-centered elements into the mobile screen edges */
  #scrollUpButton:not([data-position="center"]) {
    right: 15px !important;
    left: auto !important;
  }
  
  /* Keeps the centered button perfectly in the middle of mobile viewports */
  #scrollUpButton[data-position="center"] {
    bottom: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #scrollUpButton {
    transition: none;
  }
}