.blurred-circle {
  display: flex;
  width: 35px;
  height: 35px;
  padding: 15px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  border-radius: 50px;
  background: radial-gradient(
    208.93% 154.42% at 50% 50.58%, 
    rgba(0, 0, 0, 0.05) 0%, 
    rgba(0, 0, 0, 0.2) 97.6%
  );
  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.4) inset;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  cursor: pointer; /* added for pointer cursor */
}

.blurred-circle img {
  width: 30px;
  height: 30px;
  pointer-events: none;
  cursor: pointer; /* added for pointer cursor */
}

.toggle {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 26px;
  position: relative;
  overflow: hidden;
}

.highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 65px;
  border-radius: 50px;
  background: radial-gradient(
    208.93% 154.42% at 50% 50.58%, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.3) 97.6%
  );
  box-shadow: 0 -2px 10px 0 rgba(255, 255, 255, 0.2) inset;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: left 0.3s ease;
  z-index: -1;
}

.highlight-left {
  margin-left: -4px;
}

.highlight-right {
  margin-left: 4px;
}

.animated {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}