/* START: For payment suggestion pills */
#suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.suggestion-pill {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.suggestion-pill:hover {
  background-color: var(--tblr-primary, #066fd1);
  color: #fff;
  transform: scale(1.05);
}

@media (max-width: 576px) {
  .suggestion-pill {
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
  }

  #suggestions {
    gap: 0.6rem;
  }
}
/* END: For payment suggestion pills */