/*
 * Shared "Get in touch" contact form.
 *
 * Expects the host page to define these CSS variables (from the SP
 * design-token layer or equivalent):
 *   --sp-primary, --sp-primary-rgb, --sp-text, --sp-text-muted,
 *   --sp-text-placeholder, --sp-radius, --sp-transition-fast
 */

.sp-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}

.sp-contact-form .sp-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sp-contact-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.sp-contact-form input,
.sp-contact-form textarea,
.sp-contact-form select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--sp-radius, 8px);
  color: var(--sp-text, #f0f0f0);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 300;
  outline: none;
  appearance: none;
  transition:
    border-color var(--sp-transition-fast, 0.15s),
    background var(--sp-transition-fast, 0.15s);
}

.sp-contact-form input::placeholder,
.sp-contact-form textarea::placeholder {
  color: var(--sp-text-placeholder, #555);
}

.sp-contact-form input:focus,
.sp-contact-form textarea:focus,
.sp-contact-form select:focus {
  border-color: var(--sp-primary, #10b981);
  background: rgba(var(--sp-primary-rgb, 16, 185, 129), 0.03);
}

.sp-contact-form textarea {
  resize: vertical;
}

.sp-contact-form .sp-contact-actions {
  text-align: center;
}

.sp-contact-form .sp-contact-error {
  color: #ef4444;
  font-size: 0.85rem;
  text-align: center;
}

.sp-contact-form .sp-contact-success {
  text-align: center;
  padding: 32px 0;
}

.sp-contact-form .sp-contact-success p:first-child {
  color: var(--sp-primary, #10b981);
  font-weight: 500;
}

.sp-contact-form .sp-contact-success p:last-child {
  color: var(--sp-text-muted, #6b7a8d);
  font-size: 0.875rem;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .sp-contact-form .sp-contact-row {
    grid-template-columns: 1fr;
  }
}