/* ========================================
   BACK TO TOP BUTTON COMPONENT
   ======================================== */

.back-to-top {
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 0.75rem;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-success);
  color: var(--bs-light);
  padding: 0;

  margin-right: 4.875rem;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 600;
  box-shadow: var(--shadow-button-hover)
    rgba(var(--btn-success-shadow-rgb), 0.2);
  transition: all var(--transition-base);
}

.back-to-top:hover {
  transform: translateY(-0.1875rem);
  background-color: var(--btn-success-hover);
  box-shadow: var(--shadow-button) rgba(var(--btn-success-shadow-rgb), 0.3);
}

.back-to-top:active {
  transform: translateY(0);
  background-color: var(--btn-success-active);
}

.back-to-top:focus {
  outline: 0.125rem solid var(--bs-success);
  outline-offset: 0.125rem;
}

/* Back to Top Icon */
.back-to-top-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Disabled State */
.back-to-top:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
   ACCESSIBILITY & MOTION SUPPORT
   ======================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }

  .back-to-top:hover {
    transform: none;
  }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .back-to-top {
    width: 3rem;
    height: 3rem;
    font-size: 1.125rem;
    margin-right: 2rem;
  }
}

@media (max-width: 576px) {
  .back-to-top {
    display: none;
  }
}