.molecule-buttons {
  /* Explicitly add display flex */
  @apply flex flex-col px-4 sm:px-0 sm:flex-row flex-wrap gap-3 sm:justify-center lg:justify-start mb-4;

  a {
    @apply font-ubuntu;
  }

  &.alignleft {
    @apply !justify-start;
  }
  &.aligncenter {
    @apply !justify-center !items-center;
  }
  &.alignright {
    @apply !justify-end !items-end;
  }

  /* Common button styles */
  .button-1,
  .button-2,
  .button-3 {
    @apply inline-block px-5 py-2 font-medium transition-all duration-200 shadow-sm border-none;
    /* border-width: 1px; */
    /* border-color: #bbc0c8; */
  }

  /* Button sizes */
  .button-small {
    @apply px-5 py-1 text-sm font-bold;
  }

  .button-medium {
    @apply px-6 py-4 text-sm font-bold;
  }

  .button-large {
    @apply px-10 py-4 text-lg font-bold;
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }

  /* Legacy button classes - mapped to new design system */
  .button-yellow {
    @apply bg-brand-green hover:bg-brand-green/80 text-white;
  }

  .button-blue {
    @apply bg-brand-green hover:bg-brand-green/80 text-white;
  }

  .button-white {
    @apply bg-brand-gray hover:bg-brand-gray/80 text-brand-navy;
  }

  .button-orange {
    @apply bg-brand-coral hover:bg-brand-coral/80 text-white;
  }
}