/* Custom Scrollbar Styles for Terms and Services */

/* Main scrollbar width */
.custom-scrollbar::-webkit-scrollbar {
  width: 48px;
}

/* Hide scrollbar arrows/buttons */
.custom-scrollbar::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* Scrollbar track (background) */
.custom-scrollbar::-webkit-scrollbar-track {
  background: linear-gradient(#DFE2EA80, #DFE2EA80) center/8px calc(100% - 24px) no-repeat;
  background-position: center;
  position: relative;
}

/* Scrollbar thumb (draggable part) - using scroll_button.svg with mask */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #616EE2;
  -webkit-mask: url('/images/public/scroll_button.svg') center/20px 20px no-repeat;
  mask: url('/images/public/scroll_button.svg') center/20px 20px no-repeat;
  border-radius: 50%;
  min-height: 48px;
  transition: background-color 0.15s ease;
}

/* Hover state for thumb */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #7186FF;
  transition: background-color 0.15s ease;
}

/* Active/pressed state for thumb */
.custom-scrollbar::-webkit-scrollbar-thumb:active {
  background-color: #515FC7;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
  transition: background-color 0.15s ease, mask-size 0.15s ease;
}

/* Hide scrollbar corners */
.custom-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox fallback - simpler scrollbar */
@supports (scrollbar-width: thin) {
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #616EE2 #DFE2EA40;
  }
}

/* For better cross-browser support, ensure smooth scrolling */
.custom-scrollbar {
  scroll-behavior: smooth;
}