/*
 * form.css
 *
 * Base styles for Neural Forms frontend forms.
 *
 * Philosophy
 *
 * Functional, not decorative. Every colour and dimension is expressed as a
 * CSS custom property so a theme can override the full look by redefining
 * a handful of variables on .neural-forms-form without fighting specificity.
 *
 * Naming: BEM - .neural-forms-form__element--modifier
 * Resets: box-sizing only; no global * reset that could break a theme.
 */


/*
   Custom properties
   Override any of these on .neural-forms-form in your theme stylesheet:
   .neural-forms-form { --neural-forms-border: #your-color; }
 */

.neural-forms-form {

    /* Border colours */
    --neural-forms-border:         #d1d5db;   /* idle border          */
    --neural-forms-border-focus:   #4f46e5;   /* focus ring           */
    --neural-forms-border-error:   #dc2626;   /* error border + text  */

    /* Text */
    --neural-forms-text:           #111827;   /* input value colour   */
    --neural-forms-placeholder:    #9ca3af;   /* placeholder colour   */
    --neural-forms-required:       #dc2626;   /* required * colour    */

    /* Error state */
    --neural-forms-error-text:     #dc2626;
    --neural-forms-error-bg:       #fef2f2;
    --neural-forms-error-border:   #fca5a5;

    /* Success state */
    --neural-forms-success-text:   #15803d;
    --neural-forms-success-bg:     #f0fdf4;
    --neural-forms-success-border: #86efac;

    /* Disabled / read-only */
    --neural-forms-disabled-bg:    #f9fafb;

    /* Structure */
    --neural-forms-radius:         6px;       /* border-radius on inputs + notices    */
    --neural-forms-field-gap:      1.25rem;   /* vertical space between fields        */
    --neural-forms-input-px:       1rem;      /* input horizontal padding             */
    --neural-forms-input-py:       0.75rem;   /* input vertical padding               */

    /* Motion */
    --neural-forms-transition:     border-color 0.15s ease, box-shadow 0.15s ease;

    /* Fields - inputs, textareas, selects */
    --neural-forms-field-bg:       #fff;      /* input background colour       */
    --neural-forms-border-width:   1px;       /* input border width            */
    --neural-forms-input-font-size:1rem;      /* input font size               */

    /* Submit button - override these via block formatting controls.
       Background inherits the active theme's primary/accent color via
       theme.json presets, falling back to a tasteful indigo. */
    --neural-forms-btn-bg:         var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--wp--preset--color--vivid-cyan-blue, #4f46e5)));
    --neural-forms-btn-color:      #ffffff;   /* button text colour         */
    --neural-forms-btn-radius:     var(--neural-forms-radius); /* button corner radius */
    --neural-forms-btn-width:      auto;      /* 100% for full-width toggle */
    --neural-forms-btn-align:      left;      /* left / center / right      */
}


/*
   Outer wrapper (.neural-forms-form-wrap)
 */

.neural-forms-form-wrap {
    /* Block container only - width and max-width left to the theme. */
    width: 100%;
}


/*
   Form element
 */

.neural-forms-form {
    box-sizing: border-box;
    width: 100%;
}

/* Scope box-sizing to the form tree so it does not affect the rest of the page. */
.neural-forms-form *,
.neural-forms-form *::before,
.neural-forms-form *::after {
    box-sizing: inherit;
}


/*
   Submitting state
   Applied by form-submit.js while a fetch is in-flight.
 */

.neural-forms-form--submitting {
    opacity: 0.7;
}


/*
   Fields container
 */

.neural-forms-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--neural-forms-field-gap);
    margin-bottom: var(--neural-forms-field-gap);
}


/*
   Multi-column row
   Wraps two consecutive half-width fields into a side-by-side pair. Each
   __field already has its own internal layout, so the row just supplies
   the grid track. Mobile collapses to one column so half-width fields
   never become unusably narrow on small screens.
 */

.neural-forms-form__row {
    display: grid;
    gap: var(--neural-forms-field-gap);
}

.neural-forms-form__row--cols-1 {
    grid-template-columns: 1fr;
}
.neural-forms-form__row--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.neural-forms-form__row--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.neural-forms-form__row--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Gap presets - names + scale match SchemaHelper::VALID_GAPS. */
.neural-forms-form__row--gap-none   { gap: 0; }
.neural-forms-form__row--gap-small  { gap: 0.5rem; }
.neural-forms-form__row--gap-medium { gap: var(--neural-forms-field-gap); }
.neural-forms-form__row--gap-large  { gap: 2rem; }

/* A column in a row holds its own field flow. min-width: 0 lets inputs
   inside actually shrink to the column width instead of forcing the
   grid track to grow. */
.neural-forms-form__row__column {
    display: flex;
    flex-direction: column;
    gap: var(--neural-forms-field-gap);
    min-width: 0;
}

/* Mobile stack - every multi-column row collapses to a single column
   on tablet/phone widths. 768px is the standard WP tablet cutoff. */
@media ( max-width: 768px ) {
    .neural-forms-form__row--cols-2,
    .neural-forms-form__row--cols-3,
    .neural-forms-form__row--cols-4 {
        grid-template-columns: 1fr;
    }
}


/*
   Individual field wrapper
 */

.neural-forms-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Type modifiers - currently identical layout, present as hooks for themes. */
.neural-forms-form__field--text,
.neural-forms-form__field--email,
.neural-forms-form__field--phone,
.neural-forms-form__field--number,
.neural-forms-form__field--textarea,
.neural-forms-form__field--select {
    /* no override needed at base level */
}

/* Checkbox row collapses its own gap - the checkbox-wrapper handles spacing. */
.neural-forms-form__field--checkbox {
    gap: 0;
}

/* Honeypot - enforce hidden even if an external CSS rule targets display. */
.neural-forms-form__field--honeypot {
    display: none !important;
}


/*
   Error state (field wrapper)
   Added by form-submit.js on a 422 response.
   Descendant selectors colour the input without JS needing to touch it.
 */

.neural-forms-form__field--has-error .neural-forms-form__input,
.neural-forms-form__field--has-error .neural-forms-form__textarea,
.neural-forms-form__field--has-error .neural-forms-form__select {
    border-color: var(--neural-forms-border-error);
}

/* Checkbox uses accent-color instead of border for the error tint. */
.neural-forms-form__field--has-error .neural-forms-form__checkbox {
    accent-color: var(--neural-forms-border-error);
}


/*
   Labels
   By default placeholders carry the field's intent (no visible <label>). When
   the builder enables show_label on a field, a block-level label is rendered
   above the input via the --block modifier. Per-option labels for
   checkbox / radio groups always render inline.
 */

.neural-forms-form__label--block {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--neural-forms-text);
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.neural-forms-form__label--checkbox,
.neural-forms-form__label--radio {
    color: var(--neural-forms-text);
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

/* Required asterisk (still emitted on inline checkbox/acceptance labels) */
.neural-forms-form__required {
    color: var(--neural-forms-required);
    margin-left: 0.125rem;
}

/* Visually hidden legend - accessible label for grouped fieldsets. */
.neural-forms-form .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}


/*
   Text-like inputs  (text · email · phone)
   Number shares this class plus its own modifier below.
 */

.neural-forms-form__input {
    display: block;
    width: 100%;
    padding: var(--neural-forms-input-py) var(--neural-forms-input-px);
    border: var(--neural-forms-border-width) solid var(--neural-forms-border);
    border-radius: var(--neural-forms-radius);
    color: var(--neural-forms-text);
    font-family: inherit;
    font-size: var(--neural-forms-input-font-size);
    line-height: 1.5;
    background-color: var(--neural-forms-field-bg);
    appearance: none;
    -webkit-appearance: none;
    transition: var(--neural-forms-transition);
}

.neural-forms-form__input:focus {
    outline: none;
    border-color: var(--neural-forms-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--neural-forms-border-focus) 20%, transparent);
    background-color: var(--neural-forms-field-focus-bg, var(--neural-forms-field-bg));
    color: var(--neural-forms-field-focus-text, var(--neural-forms-text));
}

.neural-forms-form__input::placeholder {
    color: var(--neural-forms-placeholder);
}

.neural-forms-form__input:disabled {
    background-color: var(--neural-forms-disabled-bg);
    cursor: not-allowed;
}

/* Number - remove browser-native spinner arrows for a cleaner look.
   The server enforces min/max/step, so the arrows are not load-bearing. */
.neural-forms-form__input--number::-webkit-inner-spin-button,
.neural-forms-form__input--number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.neural-forms-form__input--number {
    -moz-appearance: textfield;
}


/*
   Textarea
 */

.neural-forms-form__textarea {
    display: block;
    width: 100%;
    padding: var(--neural-forms-input-py) var(--neural-forms-input-px);
    border: var(--neural-forms-border-width) solid var(--neural-forms-border);
    border-radius: var(--neural-forms-radius);
    color: var(--neural-forms-text);
    font-family: inherit;
    font-size: var(--neural-forms-input-font-size);
    line-height: 1.5;
    background-color: var(--neural-forms-field-bg);
    resize: vertical;
    min-height: 6rem;
    transition: var(--neural-forms-transition);
}

.neural-forms-form__textarea:focus {
    outline: none;
    border-color: var(--neural-forms-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--neural-forms-border-focus) 20%, transparent);
    background-color: var(--neural-forms-field-focus-bg, var(--neural-forms-field-bg));
    color: var(--neural-forms-field-focus-text, var(--neural-forms-text));
}

.neural-forms-form__textarea::placeholder {
    color: var(--neural-forms-placeholder);
}

.neural-forms-form__textarea:disabled {
    background-color: var(--neural-forms-disabled-bg);
    cursor: not-allowed;
}


/*
   Select
 */

.neural-forms-form__select {
    display: block;
    width: 100%;
    padding: var(--neural-forms-input-py) var(--neural-forms-input-px);
    /* Extra right padding leaves room for the custom arrow */
    padding-right: 2.25rem;
    border: var(--neural-forms-border-width) solid var(--neural-forms-border);
    border-radius: var(--neural-forms-radius);
    color: var(--neural-forms-text);
    font-family: inherit;
    font-size: var(--neural-forms-input-font-size);
    line-height: 1.5;
    background-color: var(--neural-forms-field-bg);
    /* Custom chevron replaces the browser-native arrow for visual consistency. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: var(--neural-forms-transition);
}

.neural-forms-form__select:focus {
    outline: none;
    border-color: var(--neural-forms-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--neural-forms-border-focus) 20%, transparent);
}

.neural-forms-form__select:disabled {
    background-color: var(--neural-forms-disabled-bg);
    cursor: not-allowed;
}


/*
   Radio
 */

.neural-forms-form__radio-group {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.neural-forms-form__radio-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.neural-forms-form__radio {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.2em;
    cursor: pointer;
    accent-color: var(--neural-forms-border-focus);
}

/*
   Checkbox Group (multi-option checkboxes)
 */

.neural-forms-form__checkbox-group {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.neural-forms-form__checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/*
   Checkbox
 */

/* Wrapper: horizontal row - input then label, aligned to first text baseline. */
.neural-forms-form__checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.neural-forms-form__checkbox {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    /* Nudge down to align with the label's first line of text. */
    margin-top: 0.2em;
    cursor: pointer;
    /* accent-color controls the checked fill in supporting browsers. */
    accent-color: var(--neural-forms-border-focus);
}


/*
   Date
 */

.neural-forms-form__input--date {
    display: block;
    width: 100%;
    padding: var(--neural-forms-input-py) var(--neural-forms-input-px);
    border: var(--neural-forms-border-width) solid var(--neural-forms-border);
    border-radius: var(--neural-forms-radius);
    color: var(--neural-forms-text);
    font-family: inherit;
    font-size: var(--neural-forms-input-font-size);
    line-height: 1.5;
    background-color: var(--neural-forms-field-bg);
    transition: border-color 0.15s ease;
}

.neural-forms-form__input--date:focus {
    outline: none;
    border-color: var(--neural-forms-border-focus);
    box-shadow: 0 0 0 1px var(--neural-forms-border-focus);
}


/*
   Range slider
 */

.neural-forms-form__range-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.neural-forms-form__input--range {
    flex: 1 1 auto;
    cursor: pointer;
    accent-color: var(--neural-forms-border-focus);
}

.neural-forms-form__range-output {
    flex-shrink: 0;
    min-width: 2.5rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--neural-forms-text);
}


/*
   Star rating
   Radio inputs hidden via .screen-reader-text on the label-wrapped input;
   the visible glyph turns brand-mint when its sibling input is checked.
 */

.neural-forms-form__rating-group {
    border: 0;
    margin: 0;
    padding: 0;
}

.neural-forms-form__rating {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.125rem;
    align-items: center;
}

.neural-forms-form__rating-star {
    cursor: pointer;
    line-height: 1;
    color: #cbd5e0;
    transition: color 80ms linear;
}

.neural-forms-form__rating-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.neural-forms-form__rating-glyph {
    display: inline-block;
    font-size: 1.5rem;
    font-style: normal;
    line-height: 1;
}

/* Hover/focus colors any star and every star to its right (because of
   row-reverse, "to the right" in DOM order is "to the left" visually). */
.neural-forms-form__rating-star:hover,
.neural-forms-form__rating-star:hover ~ .neural-forms-form__rating-star,
.neural-forms-form__rating-star:focus-within,
.neural-forms-form__rating-star:focus-within ~ .neural-forms-form__rating-star {
    color: #15db95;
}

/* Checked + every star after it (DOM-after = visually-left in row-reverse). */
.neural-forms-form__rating-input:checked ~ .neural-forms-form__rating-glyph,
.neural-forms-form__rating-star:has( .neural-forms-form__rating-input:checked ),
.neural-forms-form__rating-star:has( .neural-forms-form__rating-input:checked ) ~ .neural-forms-form__rating-star {
    color: #080f5b;
}


/*
   Poll
   Radio-style choice list. Phase 3 will populate the
   .neural-forms-form__poll-results container.
 */

.neural-forms-form__poll {
    border: 0;
    margin: 0;
    padding: 0;
}

.neural-forms-form__poll-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.neural-forms-form__poll-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.neural-forms-form__poll-input {
    accent-color: #080f5b;
    cursor: pointer;
}

.neural-forms-form__label--poll {
    cursor: pointer;
}

.neural-forms-form__poll-results {
    margin-top: 0.75rem;
}


/*
   Quiz Question
   Radio-style choice list. After-submit feedback placeholder per
   question + form-level score summary near the submit button.
   The renderer NEVER emits is_correct on the page, so no CSS hint
   exists that would let a visitor identify the correct option
   pre-submit. All scoring + correctness UI is JS-driven from the
   submit response.
 */

.neural-forms-form__quiz {
    border: 0;
    margin: 0;
    padding: 0;
}

.neural-forms-form__quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.neural-forms-form__quiz-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.neural-forms-form__quiz-input {
    accent-color: #080f5b;
    cursor: pointer;
}

.neural-forms-form__label--quiz {
    cursor: pointer;
}

.neural-forms-form__quiz-feedback {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: rgba( 8, 15, 91, 0.04 );
}

.neural-forms-form__quiz-verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.neural-forms-form__quiz-verdict-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
}

.neural-forms-form__quiz-verdict--correct {
    color: #0a7d56;
}

.neural-forms-form__quiz-verdict--correct .neural-forms-form__quiz-verdict-icon {
    background: #15db95;
}

.neural-forms-form__quiz-verdict--incorrect {
    color: #b91c1c;
}

.neural-forms-form__quiz-verdict--incorrect .neural-forms-form__quiz-verdict-icon {
    background: #ef4444;
}

.neural-forms-form__quiz-correct {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--neural-forms-text);
}

.neural-forms-form__quiz-explanation {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--neural-forms-text);
    opacity: 0.85;
    line-height: 1.5;
}

.neural-forms-form__quiz-summary {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: linear-gradient( 135deg, #080f5b 0%, #1a247a 100% );
    color: #fff;
}

.neural-forms-form__quiz-summary-line {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
}

.neural-forms-form__quiz-summary-line strong {
    font-weight: 700;
}

/* Phase 3: pass/fail badge inside the quiz summary block. */

.neural-forms-form__quiz-passfail {
    margin: 0.6rem 0 0 !important;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
}

.neural-forms-form__quiz-passfail-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
}

.neural-forms-form__quiz-passfail--passed .neural-forms-form__quiz-passfail-badge {
    background: #15db95;
    color: #062b1e;
}

.neural-forms-form__quiz-passfail--failed .neural-forms-form__quiz-passfail-badge {
    background: #fde68a;
    color: #78350f;
}

.neural-forms-form__quiz-passfail-meta {
    opacity: 0.85;
}

.neural-forms-form__quiz-result-message {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: rgba( 255, 255, 255, 0.12 );
    border-radius: 6px;
}

.neural-forms-form__quiz-result-title {
    margin: 0 !important;
    font-weight: 700;
    font-size: 0.9375rem;
}

.neural-forms-form__quiz-result-body {
    margin: 0.25rem 0 0 !important;
    font-size: 0.8125rem;
    line-height: 1.45;
    opacity: 0.9;
}

.neural-forms-form__poll-total {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--neural-forms-text);
    font-weight: 500;
}

.neural-forms-form__poll-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.neural-forms-form__poll-bar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.neural-forms-form__poll-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.neural-forms-form__poll-bar-label {
    color: var(--neural-forms-text);
    font-weight: 500;
}

.neural-forms-form__poll-bar-count {
    color: var(--neural-forms-text);
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.neural-forms-form__poll-bar-track {
    height: 8px;
    background: rgba( 8, 15, 91, 0.08 );
    border-radius: 999px;
    overflow: hidden;
}

.neural-forms-form__poll-bar-fill {
    height: 100%;
    background: linear-gradient( 90deg, #080f5b 0%, #15db95 100% );
    border-radius: 999px;
    transition: width 200ms ease;
}


/*
   Field error message
   Populated and un-hidden by form-submit.js on 422.
 */

.neural-forms-form__field-error {
    /* margin:0 overrides any theme p { margin } rule */
    margin: 0;
    color: var(--neural-forms-error-text);
    font-size: 0.8125rem;   /* 13px at base-16 */
    line-height: 1.25;
    /* [hidden] attribute handles visibility - no display:none needed here */
}


/*
   Global error (429, 403, 5xx, network failures)
   Populated and un-hidden by form-submit.js.
 */

.neural-forms-form__global-error {
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--neural-forms-error-border);
    border-radius: var(--neural-forms-radius);
    background-color: var(--neural-forms-error-bg);
    color: var(--neural-forms-error-text);
    font-size: 0.875rem;
    line-height: 1.5;
}


/*
   Success state
   Revealed by form-submit.js on 201; sibling of <form> so hiding the form
   does not also hide this element.
 */

.neural-forms-form__success {
    padding: 1rem 1.25rem;
    border: 1px solid var(--neural-forms-success-border);
    border-radius: var(--neural-forms-radius);
    background-color: var(--neural-forms-success-bg);
    color: var(--neural-forms-success-text);
}

/* Reset any theme paragraph margins inside the success box. */
.neural-forms-form__success p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/*
   Dynamic results card. Lives inside .neural-forms-form__success
   so it remains visible after the form is hidden post-submit.
   Populated by form-submit.js with poll bars / quiz score; empty
   + hidden until a 201 response arrives.
 */

.neural-forms-form__dynamic-results {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Reset success box's accent-on-text colouring so child poll
       bars + quiz cards render with their own brand palette. */
    color: var(--neural-forms-text);
    background: rgba( 255, 255, 255, 0.7 );
    border-radius: var(--neural-forms-radius);
    padding: 0.75rem;
}

.neural-forms-form__dynamic-results:empty,
.neural-forms-form__dynamic-results[hidden] {
    display: none;
}

.neural-forms-form__dynamic-quiz {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.neural-forms-form__dynamic-quiz-questions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.neural-forms-form__dynamic-quiz-question {
    padding: 0.75rem;
    border-radius: 6px;
    background: rgba( 8, 15, 91, 0.04 );
}

.neural-forms-form__dynamic-quiz-label {
    margin: 0 0 0.4rem !important;
    font-size: 0.9375rem;
    font-weight: 600;
}

.neural-forms-form__quiz-selected {
    margin: 0.4rem 0 0 !important;
    font-size: 0.8125rem;
    color: var(--neural-forms-text);
    opacity: 0.85;
}

.neural-forms-form__dynamic-poll {
    padding: 0.75rem;
    border-radius: 6px;
    background: rgba( 8, 15, 91, 0.04 );
}


/*
   File input
 */

.neural-forms-form__file-input {
    display: block;
    width: 100%;
    padding: var(--neural-forms-input-py) var(--neural-forms-input-px);
    border: var(--neural-forms-border-width) solid var(--neural-forms-border);
    border-radius: var(--neural-forms-radius);
    color: var(--neural-forms-text);
    font-family: inherit;
    font-size: 0.875rem;
    background-color: var(--neural-forms-field-bg);
    cursor: pointer;
    transition: var(--neural-forms-transition);
}

.neural-forms-form__file-input:focus {
    outline: none;
    border-color: var(--neural-forms-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--neural-forms-border-focus) 20%, transparent);
}

.neural-forms-form__file-input:disabled {
    background-color: var(--neural-forms-disabled-bg);
    cursor: not-allowed;
}

/* Error state */
.neural-forms-form__field--has-error .neural-forms-form__file-input {
    border-color: var(--neural-forms-border-error);
}

.neural-forms-form__file-hint {
    margin: 0.25rem 0 0;
    color: var(--neural-forms-placeholder);
    font-size: 0.8125rem;
    line-height: 1.25;
}


/*
   CAPTCHA widget
   Rendered between the global-error paragraph and the submit button when a
   provider is configured and the form has captcha_enabled = true.
   The widget iframe itself is injected by the provider SDK - this rule only
   controls the wrapper spacing so it doesn't sit flush against adjacent elements.
 */

.neural-forms-form__captcha {
    margin-top: 16px;
    margin-bottom: 16px;
}


/*
   Submit button
   Dark neutral default - easy to override with the custom property or a
   theme selector targeting .neural-forms-form__submit directly.
 */

/* Wrapper: controls horizontal alignment of the button. */
.neural-forms-form__submit-wrap {
    text-align: var(--neural-forms-btn-align, left);
}

.neural-forms-form__submit {
    display: inline-block;
    width: var(--neural-forms-btn-width);
    padding: 0.875rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--neural-forms-btn-radius);
    background-color: var(--neural-forms-btn-bg);
    color: var(--neural-forms-btn-color);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease, filter 0.15s ease;
}

.neural-forms-form__submit:hover:not(:disabled) {
    filter: brightness(0.85);
}

/* Visible focus ring for keyboard navigation. :focus-visible avoids showing
   the ring on mouse click while still showing it on Tab. */
.neural-forms-form__submit:focus-visible {
    outline: 2px solid var(--neural-forms-border-focus);
    outline-offset: 2px;
}

.neural-forms-form__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/*
   Submit button spinner
   Shown inline inside the button during form submission.
 */

@keyframes neural-forms-spin {
    to { transform: rotate( 360deg ); }
}

.neural-forms-form__spinner {
    display: inline-block;
    width:  0.875em;
    height: 0.875em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.125em;
    animation: neural-forms-spin 0.6s linear infinite;
}


/*
   Success message focus outline
   Remove the visible outline when focused programmatically - the green box
   itself is the visual indicator. Screen readers still announce it.
 */

.neural-forms-form__success:focus {
    outline: none;
}


/*
   "Submit another response" link inside the success box
 */

.neural-forms-form__reset-link {
    display: inline-block;
    margin-top: 12px;
    padding: 0;
    background: none;
    border: none;
    color: var(--neural-forms-success-text);
    font-size: 0.9em;
    text-decoration: underline;
    cursor: pointer;
}

.neural-forms-form__reset-link:hover {
    opacity: 0.8;
}

/* ---------------------------------------------------------------------------
 * Multi-step (1.1.0).
 *
 * Without JS: every .neural-forms-form__step renders stacked and the
 * submit button stays visible. With JS: form-submit.js applies
 * style.display="none" to inactive steps and toggles .is-active on
 * the current one.
 *
 * Brand colors:
 *   --nf-primary  #080f5b  (dominant interactive surface)
 *   --nf-accent   #15db95  (live/success accent)
 * Themes that need to override these can target the selectors below.
 * ------------------------------------------------------------------------- */

.neural-forms-form__step {
    border-top: 2px solid #080f5b;
    padding: 16px 0 4px;
    margin-bottom: 8px;
}

.neural-forms-form__step:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.neural-forms-form__step-title {
    margin: 0 0 4px;
    font-size: 1.1em;
    font-weight: 600;
    color: #080f5b;
}

.neural-forms-form__step-description {
    margin: 0 0 12px;
    color: #4b5563;
    font-size: 0.92em;
}

.neural-forms-form__step-body {
    margin-bottom: 8px;
}

.neural-forms-form__steps-nav {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.neural-forms-form__step-prev,
.neural-forms-form__step-next {
    background: #fff;
    color: #080f5b;
    border: 1px solid #080f5b;
    border-radius: 6px;
    padding: 9px 18px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
}

.neural-forms-form__step-prev:hover,
.neural-forms-form__step-next:hover {
    background: rgba( 8, 15, 91, 0.06 );
}

.neural-forms-form__step-next {
    background: #080f5b;
    color: #fff;
    margin-left: auto;
}

.neural-forms-form__step-next:hover {
    background: #050a45;
    color: #fff;
}

/* Submit button on a multi-step form is JS-toggled; no CSS-only
 * change here. Without JS it stays visible because nothing sets
 * display:none on it. */

@media ( max-width: 600px ) {
    .neural-forms-form__steps-nav {
        flex-direction: column;
    }
    .neural-forms-form__step-next {
        margin-left: 0;
    }
}

/* Progress indicator (1.1.0 multi-step). */

.neural-forms-form__progress {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

/* Numbers mode - row of pills with optional label. */

.neural-forms-form__progress--numbers {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.neural-forms-form__progress-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.92em;
}

.neural-forms-form__progress-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.85em;
    font-weight: 600;
}

.neural-forms-form__progress-item.is-active .neural-forms-form__progress-num {
    background: #080f5b;
    color: #fff;
}

.neural-forms-form__progress-item.is-active {
    color: #080f5b;
    font-weight: 600;
}

.neural-forms-form__progress-item.is-complete .neural-forms-form__progress-num {
    background: #15db95;
    color: #fff;
}

.neural-forms-form__progress-item.is-complete {
    color: #080f5b;
}

/* Bar mode - track + fill + label. */

.neural-forms-form__progress--bar {
    display: block;
}

.neural-forms-form__progress-bar-track {
    width: 100%;
    height: 6px;
    background: rgba( 8, 15, 91, 0.10 );
    border-radius: 999px;
    overflow: hidden;
}

.neural-forms-form__progress-bar-fill {
    height: 100%;
    background: #080f5b;
    transition: width 0.25s ease;
}

.neural-forms-form__progress-text {
    margin: 6px 0 0;
    color: #4b5563;
    font-size: 0.85em;
    font-weight: 500;
}

@media ( max-width: 600px ) {
    .neural-forms-form__progress-item .neural-forms-form__progress-label {
        display: none;
    }
}

/* Section (1.1.0 layout/content node). Visual divider + heading +
 * optional description. Never an input; never carries a name attr. */

.neural-forms-form__section {
    margin: 18px 0 12px;
    padding: 0;
}

.neural-forms-form__section-title {
    margin: 0 0 4px;
    font-size: 1.05em;
    font-weight: 600;
    color: #080f5b;
}

.neural-forms-form__section-description {
    margin: 0 0 8px;
    color: #4b5563;
    font-size: 0.92em;
}

.neural-forms-form__section--default .neural-forms-form__section-title {
    border-bottom: 1px solid rgba( 8, 15, 91, 0.10 );
    padding-bottom: 6px;
}

.neural-forms-form__section--minimal .neural-forms-form__section-title {
    border-bottom: 0;
    padding-bottom: 0;
}

.neural-forms-form__section--boxed {
    background: rgba( 8, 15, 91, 0.04 );
    border: 1px solid rgba( 8, 15, 91, 0.10 );
    border-radius: 8px;
    padding: 12px 14px;
}

.neural-forms-form__section--boxed .neural-forms-form__section-title {
    border-bottom: 0;
    padding-bottom: 0;
}