/* ==========================================================================
 * StartLike Theme - Component: Page Top (Scroll to Top)
 * ========================================================================== */

.c-page-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s var(--sl-transition-timing),
    visibility 0.3s var(--sl-transition-timing),
    transform 0.3s var(--sl-transition-timing);
}

.c-page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .c-page-top {
    right: 2rem;
    bottom: 2rem;
  }
}

/* ----------------------------------------------------------------
 * Button
 * ---------------------------------------------------------------- */
.c-page-top__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background-color: var(--sl-accent-color);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition:
    background-color var(--sl-transition-duration) var(--sl-transition-timing),
    box-shadow var(--sl-transition-duration) var(--sl-transition-timing);
}

.c-page-top__btn:hover {
  background-color: var(--sl-sub-accent-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Arrow icon */
.c-page-top__btn::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg) translateY(2px);
}

@media (min-width: 1024px) {
  .c-page-top__btn {
    width: 48px;
    height: 48px;
  }
}