/* ============================================================================
 * Native intake form — supplements assets/css/formio-custom.css.
 * formio-custom.css supplies the Form.io look (wizard tabs, inputs, radios,
 * pill buttons, file dropzone, mobile rules) via Form.io-compatible markup the
 * native form now emits. This file only covers the pieces that stylesheet
 * doesn't: the two-column field grid, the entry-screen flow selector, the
 * suburb autocomplete dropdown, and the success panel. Tokens match
 * formio-custom.css (indigo #667eea, orange #f0a763, blue #caddff, grays).
 * ==========================================================================*/

#native-intake-form .formio-form { padding-bottom: 0; }

/* Required-field asterisk. Self-contained (not Form.io's `.field-required`, which
   the Form.io CDN CSS decorates with an extra `::after " *"` — that would double it). */
.lfaod-req { color: #ef4444; font-weight: 400; margin-left: 2px; }

/* Two-column field grid on desktop; .formio-component supplies row spacing. */
.lfaod-grid { display: block; }
@media (min-width: 768px) {
  .lfaod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    align-items: start;
  }
  .lfaod-col-2 { grid-column: 1 / -1; }
}

/* formio-custom.css adds margin-top:1.5rem to .formio-component:first-child
   (Form.io used it to space the first field below the wizard tabs). In our grid
   that pushes the first cell (e.g. First Name) below its row neighbour (Last
   Name); reset it so the first row aligns. The nav's own margin-bottom already
   provides the spacing below the tabs. */
.lfaod-grid > .formio-component:first-child { margin-top: 0; }

/* Radio / checkbox option rows: input + label aligned, stacked. */
.formio-component-radio .form-check,
.formio-component-selectboxes .form-check {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.375rem;
}

/* Entry screen: flow selector is a standard radio group (.formio-component-radio),
   styled by formio-custom.css like the rest of the form's radios. */
.lfaod-entry-actions { display: flex; justify-content: center; margin-top: 2rem; }

/* Suburb autocomplete dropdown. */
.lfaod-suburb-wrap { position: relative; }
.lfaod-suburb-list {
  position: absolute;
  z-index: 30;
  margin-top: 2px;
  width: 100%;
  max-height: 14rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.lfaod-suburb-list.hidden { display: none; }
.lfaod-suburb-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #374151;
}
.lfaod-suburb-item:hover { background-color: #667eea; color: #fff; }
.lfaod-suburb-note { padding: 0.5rem 0.75rem; color: #6b7280; font-size: 0.875rem; }

/* File dropzone: native input inside the Form.io dashed .fileSelector box. */
.formio-component-file .fileSelector { color: #6b7280; font-size: 0.875rem; }
.formio-component-file .fileSelector input[type="file"] { display: block; margin: 0.75rem auto 0; }
.formio-component-file .fileSelector .lfaod-file-name { margin-top: 0.5rem; color: #374151; font-size: 0.8125rem; }

/* Success panel. */
.lfaod-success { text-align: center; padding: 3rem 1rem; }
.lfaod-success-icon { font-size: 3rem; margin-bottom: 1rem; }
.lfaod-success h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #333333;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.lfaod-success p { color: #6b7280; }

/* Error text uses formio-custom.css .help-block; keep it hidden until shown. */
#native-intake-form .help-block.hidden { display: none; }