/*
 * 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 {

    /* Theme-aware accent color.
       Resolves through WordPress preset slugs the active theme is
       most likely to ship (primary / accent / vivid-cyan-blue from
       WP core), falling back to the Neural Forms brand navy only
       when no preset matches. Used everywhere we previously
       hardcoded #080f5b — multistep step title, progress indicator
       active / fill / track, section title divider, radio /
       checkbox accent-color, repeater Add button, and the input
       focus ring. */
    --neural-forms-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--wp--preset--color--vivid-cyan-blue, #080f5b)));

    /* Border colours */
    --neural-forms-border:         #d1d5db;   /* idle border          */
    --neural-forms-border-focus:   var(--neural-forms-accent);
    --neural-forms-border-error:   #dc2626;   /* error border + text  */

    /* Text — NO default here. The input / label consumer rules read
       `color: var(--neural-forms-text)`; with the variable unset the
       declaration is invalid and the color cascades down from the
       parent (= the theme's body text color). BlockHandler still
       sets the variable when an author picks fieldTextColor, so
       per-block overrides keep working. */
    --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;

    /* Fields - inputs, textareas, selects.
       --neural-forms-input-font-size is intentionally NOT defaulted
       so the input font-size inherits from the theme's body. The
       consumer rules read `font-size: var(--neural-forms-input-
       font-size)` and the unset var makes the declaration invalid
       → falls through to the inherited size. Per-field overrides
       still apply because BlockHandler emits fieldFontSize as a
       direct rule, not via this variable. */
    --neural-forms-field-bg:       #fff;      /* input background colour       */
    --neural-forms-border-width:   1px;       /* input border width            */
    --neural-forms-border-style:   solid;     /* input border style            */

    /* Submit / nav button — no default bg/color/radius here.
       FormRenderer adds `wp-element-button` to those buttons so the
       active theme's Button-element style (block themes via
       theme.json, classic themes via a `button` selector) controls
       the look. BlockHandler emits per-block btn* overrides as
       direct rules at higher specificity when authors customise. */
    --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%;
    box-sizing: border-box;
}


/*
   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) var(--neural-forms-border-style) 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: none;
    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
 */

/*
   Textarea visual rules deliberately do NOT consume the
   --neural-forms-field-* variables that inputs/selects use.
   The block editor's "Input Fields" panel sets those variables
   on the form root; if textarea inherited from them it would
   silently take on input bg / border / text color even though
   the dedicated "Textarea Field" panel was left empty (visible
   bleed reported in 0.2.0). Use textarea-scoped variables with
   the same literal defaults instead, so the two panels stay
   independent: Textarea panel emits direct rules on
   .neural-forms-block-<uid> .neural-forms-form__textarea to
   customise; absent customisation, textareas fall back to the
   form's idle defaults regardless of what fieldBg / fieldText /
   etc are set on inputs.
 */
.neural-forms-form__textarea {
    display: block;
    width: 100%;
    padding: var(--neural-forms-input-py) var(--neural-forms-input-px);
    border: var(--neural-forms-textarea-border-width, 1px) var(--neural-forms-textarea-border-style, solid) var(--neural-forms-textarea-border, #d1d5db);
    border-radius: var(--neural-forms-textarea-radius, 6px);
    color: var(--neural-forms-textarea-text, #111827);
    font-family: inherit;
    font-size: var(--neural-forms-input-font-size);
    line-height: 1.5;
    background-color: var(--neural-forms-textarea-bg, #fff);
    resize: vertical;
    min-height: 6rem;
    transition: var(--neural-forms-transition);
}

.neural-forms-form__textarea:focus {
    outline: none;
    border-color: var(--neural-forms-textarea-border-focus, #4f46e5);
    box-shadow: none;
    background-color: var(--neural-forms-textarea-focus-bg, var(--neural-forms-textarea-bg, #fff));
    color: var(--neural-forms-textarea-focus-text, var(--neural-forms-textarea-text, #111827));
}

.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) var(--neural-forms-border-style) 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: none;
}

.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;
    align-items: center;
}

.neural-forms-form__radio {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
}

.neural-forms-form__radio:checked {
    background-image: radial-gradient(circle, var(--neural-forms-border-focus) 40%, transparent 40%);
    border-color: var(--neural-forms-border-focus);
}

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

/*
   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;
    align-items: center;
}

/*
   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;
    align-items: center;
}

.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);
}

/* Remove the WP global-styles focus outline (:where(.wp-site-blocks :focus))
   from checkboxes — it adds a misplaced 2px solid ring on every focused
   checkbox regardless of theme. */
.neural-forms-form__checkbox:focus {
    outline: none;
}


/*
   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) var(--neural-forms-border-style) 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: none;
}


/*
   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: var(--neural-forms-accent);
}


/*
   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;
    cursor: pointer;
}

.neural-forms-form__poll-input {
    accent-color: var(--neural-forms-accent);
    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;
    cursor: pointer;
}

.neural-forms-form__quiz-input {
    accent-color: var(--neural-forms-accent);
    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: color-mix(in srgb, var(--neural-forms-accent) 4%, transparent);
}

.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: color-mix(in srgb, var(--neural-forms-accent) 8%, transparent);
    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: color-mix(in srgb, var(--neural-forms-accent) 4%, transparent);
}

.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: color-mix(in srgb, var(--neural-forms-accent) 4%, transparent);
}


/*
   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) var(--neural-forms-border-style) 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: none;
}

.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 {
    /* Structural rules only — color, background, border, font and
       radius are deliberately omitted so the theme's
       :where(.wp-element-button) rule (block themes) or general
       `button` styles (classic themes) take effect by default. A
       Neural Forms block dropped onto a page looks like every other
       button on that page. Per-block customisations
       (btnBgColor / btnTextColor / btnRadius / btnFontSize / etc.)
       still win because BlockHandler emits them as direct rules on
       `.neural-forms-block-<uid>.neural-forms-block-wrap .neural-
       forms-form__submit` (specificity 0,3,0), high enough to beat
       any `:where()`-wrapped theme rule. */
    display: inline-block;
    width: var(--neural-forms-btn-width);
    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;
}


/*
   Button icons
   Inline SVG icons inside submit / nav buttons. The .nf-btn--has-icon class
   is added by FormRenderer when an icon is present; it switches the button to
   inline-flex so the icon and label sit side-by-side.
   .nf-btn-label wraps the text node so JS (form-submit.js updateNavLabels)
   can update only the text without clobbering the icon <span>.
 */

.nf-btn--has-icon {
    display: inline-flex;
    align-items: center;
    /* No gap — icon spacing is handled per-direction via margin so that
       hover-reveal mode can collapse it to zero without layout shift. */
}

.nf-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    pointer-events: none;
    overflow: hidden; /* needed when width collapses to 0 in hover-reveal */
}

/* Always-visible icon: add spacing between icon and label text. */
.nf-btn-icon--after  { margin-left:  0.4em; }
.nf-btn-icon--before { margin-right: 0.4em; }

.nf-btn-icon svg {
    width: 100%;
    height: 100%;
}

/* Hover-reveal: icon takes no space at rest (width + margin both 0). */
.nf-btn--hover-icon .nf-btn-icon--after {
    opacity: 0;
    width: 0;
    margin-left: 0;
    transform: translateX( 0.35em );
    transition: opacity 0.2s ease, transform 0.2s ease,
                width 0.2s ease, margin 0.2s ease;
}

.nf-btn--hover-icon .nf-btn-icon--before {
    opacity: 0;
    width: 0;
    margin-right: 0;
    transform: translateX( -0.35em );
    transition: opacity 0.2s ease, transform 0.2s ease,
                width 0.2s ease, margin 0.2s ease;
}

/* Reveal on hover and keyboard focus — restore size and spacing. */
.nf-btn--hover-icon:hover .nf-btn-icon--after,
.nf-btn--hover-icon:focus-visible .nf-btn-icon--after {
    opacity: 1;
    width: 1em;
    margin-left: 0.4em;
    transform: translateX( 0 );
}

.nf-btn--hover-icon:hover .nf-btn-icon--before,
.nf-btn--hover-icon:focus-visible .nf-btn-icon--before {
    opacity: 1;
    width: 1em;
    margin-right: 0.4em;
    transform: translateX( 0 );
}


/*
   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 var(--neural-forms-accent);
    padding: 30px 0 4px;
    margin-bottom: 8px;
}

/* ── Step transition animations ─────────────────────────────────────────── */

/* The steps-body wrapper is the animation container — progress indicator,
   nav buttons and submit sit outside it and are never disturbed. */
.neural-forms-form[data-step-transition] .neural-forms-form__steps-body {
    position: relative;
    overflow: hidden;
}

/* During a transition steps are taken out of flow; height is locked by JS. */
.neural-forms-form[data-step-transition] .neural-forms-form__step {
    box-sizing: border-box;
    width: 100%;
}


.neural-forms-form[data-step-transition] .neural-forms-form__step.nf-step-animating-out {
    pointer-events: none;
}

/* ── Slide ── */
.neural-forms-form[data-step-transition="slide"] .neural-forms-form__step.nf-step-enter-from-right { transform: translateX(100%); }
.neural-forms-form[data-step-transition="slide"] .neural-forms-form__step.nf-step-enter-from-left  { transform: translateX(-100%); }
.neural-forms-form[data-step-transition="slide"] .neural-forms-form__step.nf-step-enter-from-up    { transform: translateY(-100%); }
.neural-forms-form[data-step-transition="slide"] .neural-forms-form__step.nf-step-enter-from-down  { transform: translateY(100%); }
.neural-forms-form[data-step-transition="slide"] .neural-forms-form__step.nf-step-exit-to-left     { transform: translateX(-100%); }
.neural-forms-form[data-step-transition="slide"] .neural-forms-form__step.nf-step-exit-to-right    { transform: translateX(100%); }
.neural-forms-form[data-step-transition="slide"] .neural-forms-form__step.nf-step-exit-to-up       { transform: translateY(-100%); }
.neural-forms-form[data-step-transition="slide"] .neural-forms-form__step.nf-step-exit-to-down     { transform: translateY(100%); }

/* ── Fade ── */
.neural-forms-form[data-step-transition="fade"] .neural-forms-form__step.nf-step-enter-from-right,
.neural-forms-form[data-step-transition="fade"] .neural-forms-form__step.nf-step-enter-from-left,
.neural-forms-form[data-step-transition="fade"] .neural-forms-form__step.nf-step-enter-from-up,
.neural-forms-form[data-step-transition="fade"] .neural-forms-form__step.nf-step-enter-from-down   { opacity: 0; }
.neural-forms-form[data-step-transition="fade"] .neural-forms-form__step.nf-step-exit-to-left,
.neural-forms-form[data-step-transition="fade"] .neural-forms-form__step.nf-step-exit-to-right,
.neural-forms-form[data-step-transition="fade"] .neural-forms-form__step.nf-step-exit-to-up,
.neural-forms-form[data-step-transition="fade"] .neural-forms-form__step.nf-step-exit-to-down      { opacity: 0; }

/* ── Scale ── */
.neural-forms-form[data-step-transition="scale"] .neural-forms-form__step.nf-step-enter-from-right { transform: scale(0.85); opacity: 0; }
.neural-forms-form[data-step-transition="scale"] .neural-forms-form__step.nf-step-enter-from-left  { transform: scale(1.1);  opacity: 0; }
.neural-forms-form[data-step-transition="scale"] .neural-forms-form__step.nf-step-exit-to-left     { transform: scale(0.85); opacity: 0; }
.neural-forms-form[data-step-transition="scale"] .neural-forms-form__step.nf-step-exit-to-right    { transform: scale(1.1);  opacity: 0; }

/* ── Flip ── */
.neural-forms-form[data-step-transition="flip"] .neural-forms-form__steps-body { perspective: 1200px; }
.neural-forms-form[data-step-transition="flip"] .neural-forms-form__step.nf-step-enter-from-right  { transform: rotateY(90deg);  opacity: 0; }
.neural-forms-form[data-step-transition="flip"] .neural-forms-form__step.nf-step-enter-from-left   { transform: rotateY(-90deg); opacity: 0; }
.neural-forms-form[data-step-transition="flip"] .neural-forms-form__step.nf-step-enter-from-up     { transform: rotateX(-90deg); opacity: 0; }
.neural-forms-form[data-step-transition="flip"] .neural-forms-form__step.nf-step-enter-from-down   { transform: rotateX(90deg);  opacity: 0; }
.neural-forms-form[data-step-transition="flip"] .neural-forms-form__step.nf-step-exit-to-left      { transform: rotateY(-90deg); opacity: 0; }
.neural-forms-form[data-step-transition="flip"] .neural-forms-form__step.nf-step-exit-to-right     { transform: rotateY(90deg);  opacity: 0; }
.neural-forms-form[data-step-transition="flip"] .neural-forms-form__step.nf-step-exit-to-up        { transform: rotateX(90deg);  opacity: 0; }
.neural-forms-form[data-step-transition="flip"] .neural-forms-form__step.nf-step-exit-to-down      { transform: rotateX(-90deg); opacity: 0; }

/* Reduced motion: disable all step transitions */
@media (prefers-reduced-motion: reduce) {
    .neural-forms-form[data-step-transition] .neural-forms-form__step.nf-step-enter-from-right,
    .neural-forms-form[data-step-transition] .neural-forms-form__step.nf-step-enter-from-left,
    .neural-forms-form[data-step-transition] .neural-forms-form__step.nf-step-enter-from-up,
    .neural-forms-form[data-step-transition] .neural-forms-form__step.nf-step-enter-from-down,
    .neural-forms-form[data-step-transition] .neural-forms-form__step.nf-step-exit-to-left,
    .neural-forms-form[data-step-transition] .neural-forms-form__step.nf-step-exit-to-right,
    .neural-forms-form[data-step-transition] .neural-forms-form__step.nf-step-exit-to-up,
    .neural-forms-form[data-step-transition] .neural-forms-form__step.nf-step-exit-to-down {
        transform: none !important;
        opacity: 1 !important;
    }
}
/* ──────────────────────────────────────────────────────────────────────── */

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

.neural-forms-form__step-title {
    margin: 0 0 10px;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--neural-forms-accent);
}

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

.neural-forms-form__step-body {
    display: flex;
    flex-direction: column;
    gap: var(--neural-forms-field-gap);
    margin-bottom: 8px;
}

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

/* Multi-step nav buttons — like the submit button, structural only.
   The theme's :where(.wp-element-button) rule (block themes) or its
   general `button` selector (classic themes) supplies the color /
   background / border / radius / typography. The previous version
   hardcoded `#080f5b` (NF brand navy) which felt out of place on any
   site whose theme used a different palette. Per-block button
   overrides emitted by BlockHandler still apply at higher
   specificity. */
.neural-forms-form__step-prev,
.neural-forms-form__step-next {
    cursor: pointer;
}

.neural-forms-form__step-next {
    /* Keep the layout-only declaration that pushes the Next button
       to the right edge of the steps-nav flex row. */
    margin-left: auto;
}

/* 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: var(--neural-forms-accent);
    color: #fff;
}

.neural-forms-form__progress-item.is-active {
    color: var(--neural-forms-accent);
    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: var(--neural-forms-accent);
}

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

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

.neural-forms-form__progress-bar-track {
    width: 100%;
    height: 6px;
    background: color-mix(in srgb, var(--neural-forms-accent) 10%, transparent);
    border-radius: 999px;
    overflow: hidden;
}

.neural-forms-form__progress-bar-fill {
    height: 100%;
    background: var(--neural-forms-accent);
    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: var(--neural-forms-accent);
}

.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 color-mix(in srgb, var(--neural-forms-accent) 10%, transparent);
    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: color-mix(in srgb, var(--neural-forms-accent) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--neural-forms-accent) 10%, transparent);
    border-radius: 8px;
    padding: 12px 14px;
}

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

/* Block editor inspector panel — border label spacing (stable selector) */
fieldset[data-wp-component="BorderControl"] legend,
fieldset[data-wp-component="BorderControl"] .components-base-control__label {
    margin-bottom: 20px;
}

/* Block editor — line height control: expand input to full available width */
.block-editor-line-height-control .components-input-control__container {
    width: 100%;
}

/* Block editor — gap between BorderControl fieldset and the next BaseControl (e.g. Hover Border Color) */
fieldset[data-wp-component="BorderControl"] + .components-base-control {
    margin-top: 16px;
}


/*
   Repeater field
   Repeatable group of child fields. Each iteration is an <li>
   inside an <ol class="__list">. The fieldset carries data-min /
   data-max / data-columns; form-submit.js consults them for
   add/remove visibility. The visible per-item label is the
   .__item-num span emitted by FormRenderer: "1.", "2.", etc.
 */

.neural-forms-repeater {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin: 0;
    background: #fcfcfd;
}

.neural-forms-repeater__list {
    /* !important is intentional. Theme content-area rules (Divi's
       `.entry-content ol { list-style: decimal; padding-left:
       1.5em; }`) carry enough specificity to win against ordinary
       resets, producing a SECOND visible number next to the
       .__item-num span. The list-style-none + padding-inline-
       start:0 pair fully suppresses both the marker and the
       marker indent. */
    list-style: none !important;
    margin: 0;
    padding: 0;
    padding-inline-start: 0 !important;
    display: grid;
    gap: 12px;
}

.neural-forms-repeater__item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    /* Suppress the native ::marker. Even with list-style:none on
       the parent <ol>, some themes restore the marker per <li>
       (Twenty Twenty-Two, etc.). Mirror the parent's reset. */
    list-style: none !important;
}

.neural-forms-repeater__item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.neural-forms-repeater__item-num {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    line-height: 1;
}

.neural-forms-repeater__remove {
    background: transparent;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.neural-forms-repeater__remove:hover {
    background: #fef2f2;
}

.neural-forms-repeater__remove[hidden] {
    display: none;
}

.neural-forms-repeater__grid {
    display: grid;
    gap: 10px;
}

.neural-forms-repeater__grid--cols-1 { grid-template-columns: 1fr; }
.neural-forms-repeater__grid--cols-2 { grid-template-columns: 1fr 1fr; }
.neural-forms-repeater__grid--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.neural-forms-repeater__grid--cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.neural-forms-repeater__child {
    min-width: 0;
    margin-bottom: 0;
}

.neural-forms-repeater__add {
    margin-top: 12px;
    background: #fff;
    color: var(--neural-forms-accent);
    border: 1px solid var(--neural-forms-accent);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.neural-forms-repeater__add:hover {
    background: var(--neural-forms-accent);
    color: #fff;
}

.neural-forms-repeater__add[hidden] {
    display: none;
}

.neural-forms-repeater__notice {
    margin: 0;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    font-size: 13px;
}

@media ( max-width: 600px ) {
    /* Always collapse to one column on small viewports — multi-
       column repeater grids get unreadable past 2 columns inside
       a narrow form container. */
    .neural-forms-repeater__grid {
        grid-template-columns: 1fr !important;
    }
}

/* ------------------------------------------------------------------ */
/* Matrix field (frontend)                                            */
/* ------------------------------------------------------------------ */
/* Survey-style row-by-column grid. Renders responsively: a horizontal
   scroll wraps the table so wide matrices never overflow the form
   container on mobile. Distinct class prefix `.neural-forms-matrix`
   so admin builder preview styles can never bleed in. The
   PreviewModal iframe ships its own inline twin of these rules
   (sandboxed iframe can't load form.css) — keep them in sync. */

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

.neural-forms-matrix__scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.neural-forms-matrix__table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
    color: #1f2937;
}

.neural-forms-matrix__table th,
.neural-forms-matrix__table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    vertical-align: middle;
}

.neural-forms-matrix__table tbody tr:last-child th,
.neural-forms-matrix__table tbody tr:last-child td {
    border-bottom: 0;
}

.neural-forms-matrix__corner {
    background: #f9fafb;
}

.neural-forms-matrix__col {
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    white-space: nowrap;
}

.neural-forms-matrix__row-label {
    font-weight: 500;
    text-align: left;
    color: #374151;
    background: #f9fafb;
    white-space: nowrap;
    /* Keep the row label visible while the user scrolls right on
       narrow viewports. */
    position: sticky;
    left: 0;
    z-index: 1;
}

.neural-forms-matrix__cell {
    /* Comfortable click target without the cell collapsing too far
       on narrow screens. */
    min-width: 64px;
}

.neural-forms-matrix__cell-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.neural-forms-matrix__input {
    cursor: pointer;
    accent-color: var(--neural-forms-accent);
}

.neural-forms-matrix__row:nth-child(even) .neural-forms-matrix__cell,
.neural-forms-matrix__row:nth-child(even) .neural-forms-matrix__row-label {
    background: #fbfbfd;
}

.neural-forms-matrix__notice {
    margin: 0;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    font-size: 13px;
}

@media ( max-width: 600px ) {
    .neural-forms-matrix__table {
        font-size: 13px;
    }
    .neural-forms-matrix__table th,
    .neural-forms-matrix__table td {
        padding: 8px 10px;
    }
}