/* forms.css — DelegateAI
   Additional form styling beyond base inputs in header.css */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.form-note {
  font-size: var(--fz-xs);
  color: var(--col-slate);
  margin-top: var(--sp-1);
}

.form-block {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--r-lg);
  padding: var(--sp-10);
}

.form-block h2 {
  font-size: var(--fz-2xl);
  margin-bottom: var(--sp-2);
}

.form-block p {
  color: var(--col-slate);
  margin-bottom: var(--sp-8);
  max-width: none;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
  cursor: pointer;
}

.cta-block {
  background: linear-gradient(135deg, var(--col-surface) 0%, var(--col-surface-2) 100%);
  border: 1px solid var(--col-border);
  border-radius: var(--r-xl);
  padding: var(--sp-12);
  text-align: center;
}

.cta-block h2 {
  font-size: clamp(var(--fz-3xl), 4vw, var(--fz-5xl));
  margin-bottom: var(--sp-4);
}

.cta-block p {
  color: var(--col-slate-lt);
  font-size: var(--fz-lg);
  margin-bottom: var(--sp-8);
  margin-inline: auto;
}

.cta-block .btn--primary { font-size: var(--fz-base); padding: var(--sp-4) var(--sp-10); }

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
  .form-block { padding: var(--sp-6); }
  .cta-block { padding: var(--sp-8); }
}