/* Contact form */
.contact-form { background: var(--surface-1); padding: 1.25rem; border-radius: 12px; border: 1px solid var(--muted-border); }
.form-label { display: block; margin-bottom: 0.5rem; color: var(--secondary-color); font-weight: 600; }
.form-input, .form-textarea, .form-select { width: 100%; padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid var(--muted-border-2); background: transparent; color: var(--text-color); margin-bottom: 0.75rem; }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; box-shadow: 0 8px 26px rgba(79,70,229,0.12); border-color: var(--primary-color); }

/* More pronounced focus/active styles for accessibility on the service select */
.form-select:focus, .form-select:active, .form-select:focus-visible {
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 30px rgba(99,102,241,0.18), 0 0 0 4px rgba(99,102,241,0.08) !important;
}

.form-select option { color: var(--text-color); background: var(--bg-color); }
.form-select option:checked, .form-select option[selected] { background: var(--primary-color); color: #fff; }

/* Ensure keyboard focus visible for accessibility */
.form-select:focus-visible { outline: 3px solid rgba(99,102,241,0.18); outline-offset: 2px; }
.submit-btn { padding: 0.75rem 1.25rem; border-radius: 999px; border: none; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); color: #fff; font-weight: 700; cursor: pointer; }
.submit-btn:hover { transform: translateY(-3px); }

.contact-info { display: grid; gap: 1rem; }
.contact-item { background: transparent; padding: 0.75rem; border-radius: 8px; border: 1px solid var(--muted-border); }
.contact-item h3 { color: var(--text-on-primary); margin-bottom: 0.25rem; }
.contact-item a { color: inherit; text-decoration: none; font-weight: 600; }
.contact-item a:hover { color: var(--accent-color); text-decoration: underline; }

/* Highlight when prefilled from chatbot */
.contact-form.chat-prefill {
  animation: chat-prefill 2s ease-in-out;
  border-color: rgba(118,75,162,0.45);
  box-shadow: 0 8px 30px rgba(118,75,162,0.12);
}
@keyframes chat-prefill {
  0% { transform: translateY(0); }
  20% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}