/**
 * Scroll to top (ht_scrolltop) – responsive styles
 */

body.ht-scrolltop-active .top_button {
  display: none !important;
}

.ht-scrolltop {
  --ht-accent: #e63946;
  --ht-accent-hover: #c1121f;
  --ht-icon: #ffffff;
  --ht-z: 999;

  position: fixed;
  z-index: var(--ht-z);
  width: clamp(2.75rem, 10vw, 3.25rem);
  height: clamp(2.75rem, 10vw, 3.25rem);
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--ht-accent) 0%, var(--ht-accent-hover) 100%);
  color: var(--ht-icon);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(230, 57, 70, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.85);
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.25s ease,
    bottom 0.3s ease,
    right 0.3s ease,
    left 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ht-scrolltop--right {
  right: var(--ht-side-desktop, 1.25rem);
  left: auto;
}

.ht-scrolltop--left {
  left: var(--ht-side-desktop, 1.25rem);
  right: auto;
}

.ht-scrolltop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ht-scrolltop:hover,
.ht-scrolltop:focus-visible {
  outline: none;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 4px 12px rgba(230, 57, 70, 0.45);
  transform: translateY(-2px) scale(1.04);
}

.ht-scrolltop:active {
  transform: translateY(0) scale(0.98);
}

.ht-scrolltop__ring {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  pointer-events: none;
  transform: rotate(-90deg);
}

.ht-scrolltop__ring circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.15s linear;
}

.ht-scrolltop__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55%;
  height: 55%;
}

.ht-scrolltop__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ht-scrolltop--minimal {
  background: #ffffff;
  color: var(--ht-accent);
  border: 2px solid var(--ht-accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.ht-scrolltop--minimal:hover,
.ht-scrolltop--minimal:focus-visible {
  background: var(--ht-accent);
  color: var(--ht-icon);
}

.ht-scrolltop--pill {
  border-radius: 14px;
}

/* Position is set via inline styles when auto-avoid runs */
.ht-scrolltop.ht-scrolltop--positioned {
  position: fixed;
}

@media (max-width: 767px) {
  .ht-scrolltop:not(.ht-scrolltop--positioned) {
    bottom: var(--ht-bottom-mobile, 4.5rem);
    right: var(--ht-side-mobile, var(--ht-side-desktop, 1rem));
    left: auto;
  }

  .ht-scrolltop--left {
    left: var(--ht-side-mobile, var(--ht-side-desktop, 1rem));
    right: auto;
  }

  .ht-scrolltop--size-custom {
    width: var(--ht-size-mobile, 2.875rem);
    height: var(--ht-size-mobile, 2.875rem);
  }
}

@media (min-width: 768px) {
  .ht-scrolltop:not(.ht-scrolltop--positioned) {
    bottom: var(--ht-bottom-desktop, 1.75rem);
    right: var(--ht-side-desktop, 1.25rem);
    left: auto;
  }

  .ht-scrolltop--left {
    left: var(--ht-side-desktop, 1.25rem);
    right: auto;
  }

  .ht-scrolltop--size-custom {
    width: var(--ht-size-desktop, 3.25rem);
    height: var(--ht-size-desktop, 3.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ht-scrolltop,
  .ht-scrolltop__ring circle {
    transition: none;
  }
}