/* Formbase — frontend form styling. Minimal defaults; sites can override freely. */

.fb-form {
  max-width: 720px;
  margin: 0 auto;
  font-family: inherit;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Field width spans on a 12-col grid. Defaults to full row. */
.fb-form .fb-field                       { grid-column: span 12; }
.fb-form .fb-field.fb-w-full             { grid-column: span 12; }
.fb-form .fb-field.fb-w-three_quarters   { grid-column: span 9; }
.fb-form .fb-field.fb-w-two_thirds       { grid-column: span 8; }
.fb-form .fb-field.fb-w-half             { grid-column: span 6; }
.fb-form .fb-field.fb-w-third            { grid-column: span 4; }
.fb-form .fb-field.fb-w-quarter          { grid-column: span 3; }

/* Section / HTML / page-break / form-level elements span full row. */
.fb-form .fb-section,
.fb-form .fb-html,
.fb-form .fb-page-break,
.fb-form .fb-submit,
.fb-form .fb-success,
.fb-form .fb-form-error,
.fb-form .fb-hp { grid-column: 1 / -1; }

/* Collapse to single column on narrow screens. */
@media (max-width: 600px) {
  .fb-form .fb-field { grid-column: span 12 !important; }
}

.fb-form .fb-field label { display: block; font-weight: 600; margin-bottom: 4px; color: #1a202c; }
.fb-form .fb-field .fb-required { color: #e53e3e; margin-left: 2px; }
.fb-form .fb-field input[type=text],
.fb-form .fb-field input[type=email],
.fb-form .fb-field input[type=tel],
.fb-form .fb-field input[type=url],
.fb-form .fb-field input[type=number],
.fb-form .fb-field input[type=date],
.fb-form .fb-field input[type=time],
.fb-form .fb-field select,
.fb-form .fb-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 15px;
  box-sizing: border-box;
}
.fb-form .fb-field textarea { min-height: 96px; }
.fb-form .fb-field .description { color: #718096; font-size: 13px; margin-top: 4px; }
.fb-form .fb-error { color: #c53030; font-size: 13px; margin-top: 4px; }
.fb-form .fb-form-error { background: #fed7d7; color: #742a2a; padding: 12px; border-radius: 6px; margin-bottom: 16px; }
.fb-form .fb-success { background: #c6f6d5; color: #22543d; padding: 16px; border-radius: 6px; }
.fb-form .fb-submit { background: #2b6cb0; color: #fff; padding: 12px 24px; border: 0; border-radius: 6px; font-size: 15px; cursor: pointer; }
.fb-form .fb-submit:disabled { opacity: .6; cursor: not-allowed; }
.fb-form .fb-hp { position: absolute; left: -9999px; top: -9999px; }
.fb-form .fb-signature-pad { border: 1px solid #cbd5e0; border-radius: 6px; background: #fff; touch-action: none; }
.fb-form .fb-signature-clear { font-size: 13px; margin-top: 4px; }