/**
 * Split from numart_main.css for maintainability.
 */

/* Back to Top Button with Progress Ring - Override contrib module styles */
#backtotop {
  position: fixed !important;
  bottom: 25px !important;
  left: 25px !important;
  right: auto !important;
  width: 48px !important;
  height: 48px !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

#backtotop .progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  transform: rotate(-90deg);
}

#backtotop .progress-ring__circle-bg {
  fill: none;
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 3;
}

#backtotop .progress-ring__circle {
  fill: none;
  stroke: var(--nm-primary-color, #000);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 125.6; /* 2 * PI * 20 (radius) */
  stroke-dashoffset: 125.6;
  transition: stroke-dashoffset 0.1s ease-out;
}

#backtotop .btn-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

#backtotop .arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--nm-gray-700, #4a4a4a);
  transition: border-bottom-color 0.3s ease, transform 0.3s ease;
}

#backtotop .arrow:first-child {
  margin-bottom: -3px;
}

#backtotop:hover .btn-inner {
  background: var(--nm-primary-color, #000);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#backtotop:hover .arrow {
  border-bottom-color: #fff;
}

#backtotop:hover .arrow:first-child {
  transform: translateY(-1px);
}

#backtotop:hover .arrow:last-child {
  transform: translateY(1px);
}

#backtotop:focus {
  outline: none !important;
}

#backtotop:focus-visible .btn-inner {
  outline: 2px solid var(--nm-primary-color, #000);
  outline-offset: 2px;
}

/* RTL positioning - keep on left side for both LTR and RTL */
html[dir="rtl"] #backtotop {
  left: 25px !important;
  right: auto !important;
}