.tttf-button-primary {
  /* Dimensions & Layout */
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Background Gradient: Bottom (#358635) to Top (#82F68C) */
  background: linear-gradient(to bottom, #358635, #82F68C);
  
  /* Border & Shape */
  border: none;
  border-radius: 5px;
  
  /* Text Styling */
  color: #FFFFFF!important;
  font-family: sans-serif; /* Replace with your specific font if needed */
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  
  /* Interaction */
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.tttf-button-primary:hover {
  opacity: 0.9;
  color: #FFFFFF!important;
}

.tttf-button-primary:active {
  transform: translateY(1px);
}

/* Secondary Buttton (Light Variant) */
.tttf-button-secondary {
  /* Dimensions & Layout */
  width: 200px;
  height: 50px;
  display: inline-flex; /* Use inline-flex to allow buttons to sit side-by-side */
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* Important: keeps the border inside the 200x50 dimensions */

  /* Background & Border */
  background-color: transparent;
  border: 1.5px solid #000000; /* Clean black outline */
  border-radius: 5px;

  /* Text Styling */
  color: #000000!important;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;

  /* Interaction */
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Subtle hover effect to match modern UI patterns */
.tttf-button-secondary:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: #333333;
  color: #000000!important;
}

.tttf-button-secondary:active {
  transform: translateY(1px);
}