/*tag*/

.btn-gradient-border {
  padding: 1.5px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    rgb(217, 87, 237, 0.6),
    rgb(153, 102, 240, 0.6)
  );
  /* lighter gradient */
  display: inline-block;
  transition: background 0.4s ease;
}

.btn-gradient-border:hover {
  background: linear-gradient(
    to right,
    rgb(217, 87, 237, 0.76),
    rgb(153, 102, 240, 0.76)
  );
  /* subtle hover */
}

.btn-gradient-border.selected {
  background: linear-gradient(to right, rgb(244, 114, 182), rgb(167, 139, 250));
  /* vibrant active state */
}

.filter-btn.selected {
  background-color: rgba(255, 255, 255, 0.5);
  /* darkened background with transparency for active filter */
}

@media (min-width: 768px) {
  .btn-gradient-border {
    padding: 2px;
  }
}

@media (prefers-color-scheme: dark) {
  .btn-gradient-border {
    background: linear-gradient(
      to right,
      rgba(129, 98, 221, 0.7),
      rgba(79, 88, 217, 0.7)
    );
    /* purple to deeper pink */
  }

  .btn-gradient-border:hover {
    background: linear-gradient(
      to right,
      rgba(129, 98, 221, 0.95),
      rgba(79, 88, 217, 0.95)
    );
    /* darker pink on hover */
  }

  .btn-gradient-border.selected {
    background: linear-gradient(
      to right,
      rgba(129, 98, 221, 0.95),
      rgba(79, 88, 217, 0.95)
    );
    /* deeper pink for active state */
  }

  .filter-btn.selected {
    background-color: rgba(0, 0, 0, 0.1);
    /* soft dark purple with transparency for focus */
  }
}