.module-button-wrapper,
div[style*="display: flex"][style*="flex-wrap: wrap"] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 8px;
  box-sizing: border-box;
}

.btn.bg-my-purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                      /* space for optional icon + text */
  min-width: 250px;
  padding: 12px 26px;             /* merged value (matches image look) */
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: #ffffff !important;
  background-color: #8121C9 !important; /* purple */
  border: 1px solid #8121C9 !important;
  border-radius: 8px !important;        /* 8px to match screenshot */
  /* subtle, optional shadow that won't overpower flat look */
  box-shadow: 0 4px 10px rgba(108,61,209,0.06);
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, color 220ms ease;
  
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.btn.bg-my-purple:hover,
.btn.tra-black-hover:hover {
  background-color: #ffffff !important;
  color: #8121C9 !important;
  border-color: #ffffff !important;
  transform: translateY(-3px); /* small lift */
  box-shadow: 0 10px 24px rgba(108,61,209,0.12);
}

.btn.bg-my-purple:active {
  transform: translateY(0) scale(0.995);
  box-shadow: 0 6px 12px rgba(108,61,209,0.10);
}

.btn.bg-my-purple:focus-visible {
  outline: 3px solid rgba(108,61,209,0.12);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Make anchor keyboard-friendly if given role attribute 
.btn.bg-my-purple[role="button"] { cursor: pointer; } */

/* Optional icon support inside the anchor:
   /
.btn .btn-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Small utility tweaks for text wrapping and long labels 
.btn.bg-my-purple {
  word-break: break-word;
  padding-inline: 18px;
} */

@media (max-width: 992px) {
  .module-button-wrapper,
  div[style*="display: flex"][style*="flex-wrap: wrap"] {
    gap: 10px;
    padding: 10px 8px;
  }

  .btn.bg-my-purple {
    min-width: 120px;
    padding: 11px 22px;
    font-size: 15px;
  }

  /* allow two buttons per row for medium screens */
  .module-button-wrapper .btn,
  div[style*="display: flex"][style*="flex-wrap: wrap"] > .btn {
    flex: 0 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    box-sizing: border-box;
  }
}

/* Mobile: single column, full-width buttons */
@media (max-width: 480px) {
  .btn.bg-my-purple {
    padding: 10px 16px;
    font-size: 16px;
    min-width: 0;
    border-radius: 750px; /* pill on mobile for better ergonomics */
    width: 80%;
    max-width: 50px;
  }

  .module-button-wrapper .btn,
  div[style*="display: flex"][style*="flex-wrap: wrap"] > .btn {
    flex: 0 1 100%;
    max-width: 65%;
  }
}

/* Respect users who prefer reduced motion 
@media (prefers-reduced-motion: reduce) {
  .btn.bg-my-purple {
    transition: none;
  }
} */