/* Common button styles */
.btn-gradient-primary,
.btn-gradient-success,
.btn-gradient-info {
  border: none;
  color: white;
  padding: 12px 24px;
  font-size: 1rem;
  transition: all 0.2s ease;
}

/* Hover effect for all buttons */
.btn-gradient-primary:hover,
.btn-gradient-success:hover,
.btn-gradient-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Active state for all buttons */
.btn-gradient-primary:active,
.btn-gradient-success:active,
.btn-gradient-info:active {
  transform: translateY(0);
}

/* Primary button (Basic Plan) - Purple/Blue gradient based on #6571FF */
.btn-gradient-primary {
  background: linear-gradient(135deg, #8f97ff, #4b59f5);
}

.btn-gradient-primary:hover {
  background: linear-gradient(135deg, #7a84ff, #3a49e0);
}

/* Success button (Plus Plan) - Green gradient based on #05A34A */
.btn-gradient-success {
  background: linear-gradient(135deg, #0bbe5b, #027d36);
}

.btn-gradient-success:hover {
  background: linear-gradient(135deg, #09ab50, #01682c);
}

/* Info button (Pro Plan) - Teal gradient based on #66D1D1 with better contrast */
.btn-gradient-info {
  background: linear-gradient(135deg, #5ac7c7, #2d9e9e);
  color: #ffffff;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-gradient-info:hover {
  background: linear-gradient(135deg, #4ebaba, #258a8a);
}