:root {
  --primary-color: #170a62;
  --secondary-color: #5f76ff;
  --text-color: #2d3436;
  --light-bg: #ecf0f1;
  --button-gradient-left: #ff6d00;
  --button-gradient-right: #ffb200;
  --button-text-color: #333;
}

/* Gradient Header */
.gradient-header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 20px 0;
}

/* Gradient Button */
.gradient-button {
  background: linear-gradient(135deg, var(--button-gradient-left), var(--button-gradient-right));
  border: none;
  color: var(--button-text-color);
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

/* Button hover effect */
.gradient-button:hover {
  opacity: 0.9;
}

/* Loader animation inside button */
@keyframes spinner {
  to {transform: rotate(360deg);}
}

.loader {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  border-top-color: var(--button-text-color);
  animation: spinner 0.6s linear infinite;
}

/* Form Elements */
form textarea {
  resize: none;
}

/* Objection titles */
.response-item h3 {
  color: #333;
  font-size: 20px;
  margin-bottom: 10px;
}

/* Response text */
.response-item p {
  color: #555;
  font-size: 1rem;
  margin-bottom: 20px;
}

/* Form focus states */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 5px var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Responsive design tweaks */
@media (max-width: 768px) {
  .gradient-header h1 {
    font-size: 1.75rem;
  }
}

/* Results container styling */
#objectionResults .response-item {
  background: var(--light-bg);
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
  transition: background 0.3s ease;
}

/* Hover effect for response items */
#objectionResults .response-item:hover {
  background: #f7f7f7;
}