/**
 * Form Runtime Engine - Frontend Styles
 *
 * @package FormRuntimeEngine
 */

/* ==========================================================================
   CSS Variables - Design System Integration

   These variables use a fallback chain pattern:
   1. First tries AISB (AI Section Builder) design tokens if available
   2. Falls back to sensible defaults for standalone use

   When AISB is active, forms automatically inherit brand styling.

   ⚠  SCOPE NOTE — DO NOT MOVE TO :ROOT
   --------------------------------------------------------------------------
   These `--fre-*` indirection variables are declared on `.fre-form`, NOT on
   `:root`. This matters when AISB has per-section palette overrides.

   CSS custom properties resolve their `var()` references at the SCOPE where
   the variable is DECLARED, not where it's consumed. If we declared
   `--fre-primary-color: var(--aisb-color-primary)` at `:root`, the value
   would be baked against the global `--aisb-color-primary` once, and AISB's
   section-scoped overrides (which set `--aisb-color-primary` on the section
   element itself) would never reach the form.

   Declaring at `.fre-form` puts the resolution at the form's location in
   the cascade — inside the section, where any per-section override is
   visible. The form's children inherit the resolved `--fre-*` values via
   the normal cascade.

   Standalone (no AISB): the fallbacks below take effect, behaviour is
   unchanged from the previous `:root` scope.

   ⚠  PUBLIC CONTRACT: Every `--aisb-*` token referenced below is part of the
   documented integration contract with the Promptless WP plugin. Before adding,
   removing, or renaming any `--aisb-*` reference in this file, read and update:
       docs/AISB_TOKEN_CONTRACT.md
   Every `var(--aisb-*, ...)` MUST include a fallback so standalone installs
   still render correctly when the plugin is inactive.
   ========================================================================== */

.fre-form {
    /* Colors - inherit from AISB or use standalone defaults */
    --fre-primary-color: var(--aisb-color-primary, #6366f1);
    --fre-primary-hover: var(--aisb-button-primary-hover-bg, #4f46e5);
    --fre-text-color: var(--aisb-color-text, #1f2937);
    --fre-text-muted: var(--aisb-smart-light-surface-muted, var(--aisb-color-text-muted, #6b7280));
    --fre-background-color: var(--aisb-color-background, #ffffff);
    --fre-surface-color: var(--aisb-color-surface, #f9fafb);
    --fre-border-color: var(--aisb-smart-light-surface-border, var(--aisb-color-border, #e5e7eb));

    /* Semantic colors.

       AISB's SmartColorManager (see Promptless WP `includes/Core/SmartColorManager.php`)
       computes WCAG-compliant tokens for text, links, icons, borders, ghost
       buttons, and highlights — but NOT for error/warning/success/info
       status colors. Those stay as raw saturated hexes from the section
       tokens, which have borderline contrast on dark surfaces.

       To compensate without forking AISB, we define two layers per status:

         --fre-error-color       : the saturated red used for borders / focus
                                   rings (non-text UI, needs 3:1 contrast)
         --fre-error-text-color  : the contrast-corrected text variant used
                                   for the required asterisk, inline error
                                   messages, and any other status-colored
                                   TEXT (needs 4.5:1 contrast)

       In light mode both resolve to the same saturated red — it's already
       accessible there. In dark mode (overrides below) the text variant
       swaps to a lighter red matching the palette `.fre-form__message--error`
       already uses, so the visual language stays consistent.

       Long-term cleaner solution: AISB itself grows
       `--aisb-smart-light-error` / `--aisb-smart-dark-error` tokens
       computed against the user's backgrounds (same pattern as
       --aisb-smart-*-text), and these FRE variables become thin
       fallbacks. Out of scope for a CSS-only fix in this plugin. */
    --fre-error-color: var(--aisb-color-error, #ef4444);
    /* Light-mode text variant: `#ef4444` only hits 3.76:1 on a white
       background, which clears the 3:1 non-text-UI bar (so it's fine on
       error borders) but FAILS the 4.5:1 bar required for body text.
       `#dc2626` (Tailwind red-600) hits 5.9:1 on white and 5.7:1 on the
       default AISB light surface — passes AA on both. Dark-mode rule
       below overrides this to `#fca5a5` for dark surfaces. */
    --fre-error-text-color: #dc2626;
    --fre-error-focus-ring: color-mix(in srgb, var(--fre-error-color) 20%, transparent);
    --fre-success-color: var(--aisb-color-success, #10b981);
    --fre-warning-color: var(--aisb-color-warning, #f59e0b);
    --fre-info-color: var(--aisb-color-info, #3b82f6);

    /* Border radius */
    --fre-border-radius: var(--aisb-section-radius-card, 8px);
    --fre-border-radius-lg: var(--aisb-section-radius-card, 12px);
    --fre-border-radius-button: var(--aisb-section-radius-button, 8px);

    /* Typography */
    --fre-font-family: var(--aisb-section-font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --fre-font-heading: var(--aisb-section-font-heading, var(--fre-font-family));
    --fre-font-size: 16px;
    --fre-line-height: 1.5;

    /* Button styling */
    --fre-button-text: var(--aisb-button-primary-text, #ffffff);
    --fre-button-bg: var(--aisb-button-primary-bg, var(--fre-primary-color));
    --fre-button-hover-bg: var(--aisb-button-primary-hover-bg, var(--fre-primary-hover));

    /* Button Typography - inherit from AISB */
    --fre-button-font: var(--aisb-section-font-button, var(--fre-font-family));
    --fre-button-weight: var(--aisb-section-font-button-weight, 500);
    --fre-button-transform: var(--aisb-section-font-button-text-transform, none);
    --fre-button-letter-spacing: var(--aisb-section-font-button-letter-spacing, normal);

    /* Glow effect color for hover */
    --fre-button-glow-color: var(--aisb-button-glow-color, rgba(99, 102, 241, 0.4));

    /* Ghost button (secondary/previous button) */
    --fre-ghost-color: var(--aisb-smart-light-ghost-button, var(--aisb-smart-light-section-link, var(--fre-primary-color)));
    --fre-ghost-hover-bg: var(--aisb-button-primary-hover-bg, var(--fre-primary-hover));
    --fre-ghost-hover-text: var(--aisb-button-primary-hover-text, var(--fre-button-text));

    /* Spacing - inherit from AISB or use standalone defaults */
    --fre-spacing-xs: var(--aisb-section-space-xs, 0.5rem);
    --fre-spacing-sm: var(--aisb-section-space-sm, 1rem);
    --fre-spacing: var(--aisb-section-space-md, 1.5rem);
    --fre-spacing-lg: var(--aisb-section-space-lg, 2rem);

    /* Transitions */
    --fre-transition-fast: var(--aisb-section-transition-fast, 150ms ease);
    --fre-transition-base: var(--aisb-section-transition-base, 200ms ease);
}

/* ==========================================================================
   Dark Mode Support

   Forms automatically inherit dark mode when placed inside AISB dark sections,
   or can be explicitly set with .fre-form--dark class.
   ========================================================================== */

.aisb-section--dark .fre-form,
.fre-form--dark {
    --fre-text-color: var(--aisb-color-dark-text, #fafafa);
    --fre-text-muted: var(--aisb-smart-dark-surface-muted, var(--aisb-color-dark-text-muted, #9ca3af));
    --fre-background-color: var(--aisb-color-dark-background, #1a1a1a);
    --fre-surface-color: var(--aisb-color-dark-surface, #2a2a2a);
    --fre-border-color: var(--aisb-smart-dark-surface-border, var(--aisb-color-dark-border, #4b5563));

    /* Ghost button in dark mode */
    --fre-ghost-color: var(--aisb-smart-dark-ghost-button, var(--aisb-smart-dark-section-link, var(--fre-primary-color)));

    /* Status color text in dark mode.

       The saturated red `#ef4444` clears 4.5:1 against true black (#1a1a1a)
       by ~5:1, but DROPS BELOW 4.5:1 against the lighter dark surface
       (`#2a2a2a`-ish) used by `.fre-section` cards. The lighter `#fca5a5`
       used here matches the palette `.fre-form__message--error` and
       `.fre-field--message-error` already use in dark mode, so the
       required-asterisk / inline-error / message-text all read with the
       same hue and consistent contrast across light and dark surfaces.

       The border-color (`--fre-error-color`) stays at the saturated red
       because borders are non-text UI (3:1 contrast requirement, which
       the saturated red meets on every supported surface). */
    --fre-error-text-color: #fca5a5;
    --fre-error-focus-ring: color-mix(in srgb, var(--fre-error-color) 30%, transparent);
}

/* ==========================================================================
   Message Dark Mode Support

   Message alerts need explicit dark mode variants since their backgrounds
   and text colors are semantic (success=green, error=red, etc.) and must
   remain recognizable while being accessible in dark contexts.
   ========================================================================== */

.aisb-section--dark .fre-form__message--success,
.fre-form--dark .fre-form__message--success {
    background-color: #1e3a2f;
    border-color: #2d5a45;
    color: #a7f3d0;
}

.aisb-section--dark .fre-form__message--error,
.fre-form--dark .fre-form__message--error {
    background-color: #3b1c1c;
    border-color: #5c2828;
    color: #fca5a5;
}

.aisb-section--dark .fre-field--message-info,
.fre-form--dark .fre-field--message-info {
    background-color: #1e3a4c;
    border-color: #2d5a70;
    color: #a5d8f3;
}

.aisb-section--dark .fre-field--message-warning,
.fre-form--dark .fre-field--message-warning {
    background-color: #3d3215;
    border-color: #5c4a1f;
    color: #fcd34d;
}

.aisb-section--dark .fre-field--message-success,
.fre-form--dark .fre-field--message-success {
    background-color: #1e3a2f;
    border-color: #2d5a45;
    color: #a7f3d0;
}

.aisb-section--dark .fre-field--message-error,
.fre-form--dark .fre-field--message-error {
    background-color: #3b1c1c;
    border-color: #5c2828;
    color: #fca5a5;
}

.aisb-section--dark .fre-form-error,
.fre-form--dark .fre-form-error {
    background-color: #3d3215;
    border-color: #5c4a1f;
    color: #fcd34d;
}

.aisb-section--dark .fre-field__warning,
.fre-form--dark .fre-field__warning {
    background-color: #3d3215;
    border-color: #5c4a1f;
    color: #fcd34d;
}

/* ==========================================================================
   Message Link Styling

   Links inside messages need explicit colors to ensure accessibility.
   Each message type has link colors that provide 4.5:1 contrast ratio
   against both light and dark mode backgrounds.
   ========================================================================== */

/* Light mode message links */
.fre-form__message--success a,
.fre-field--message-success a {
    color: #0d5030;
    text-decoration: underline;
}
.fre-form__message--success a:hover,
.fre-field--message-success a:hover {
    color: #083d24;
}

.fre-form__message--error a,
.fre-field--message-error a {
    color: #5c1a1a;
    text-decoration: underline;
}
.fre-form__message--error a:hover,
.fre-field--message-error a:hover {
    color: #3d1111;
}

.fre-field--message-info a {
    color: #084050;
    text-decoration: underline;
}
.fre-field--message-info a:hover {
    color: #052d38;
}

.fre-field--message-warning a,
.fre-form-error a,
.fre-field__warning a {
    color: #6b5003;
    text-decoration: underline;
}
.fre-field--message-warning a:hover,
.fre-form-error a:hover,
.fre-field__warning a:hover {
    color: #4d3a02;
}

/* Dark mode message links */
.aisb-section--dark .fre-form__message--success a,
.aisb-section--dark .fre-field--message-success a,
.fre-form--dark .fre-form__message--success a,
.fre-form--dark .fre-field--message-success a {
    color: #6ee7b7;
}
.aisb-section--dark .fre-form__message--success a:hover,
.aisb-section--dark .fre-field--message-success a:hover,
.fre-form--dark .fre-form__message--success a:hover,
.fre-form--dark .fre-field--message-success a:hover {
    color: #a7f3d0;
}

.aisb-section--dark .fre-form__message--error a,
.aisb-section--dark .fre-field--message-error a,
.fre-form--dark .fre-form__message--error a,
.fre-form--dark .fre-field--message-error a {
    color: #f87171;
}
.aisb-section--dark .fre-form__message--error a:hover,
.aisb-section--dark .fre-field--message-error a:hover,
.fre-form--dark .fre-form__message--error a:hover,
.fre-form--dark .fre-field--message-error a:hover {
    color: #fca5a5;
}

.aisb-section--dark .fre-field--message-info a,
.fre-form--dark .fre-field--message-info a {
    color: #7dd3fc;
}
.aisb-section--dark .fre-field--message-info a:hover,
.fre-form--dark .fre-field--message-info a:hover {
    color: #a5d8f3;
}

.aisb-section--dark .fre-field--message-warning a,
.aisb-section--dark .fre-form-error a,
.aisb-section--dark .fre-field__warning a,
.fre-form--dark .fre-field--message-warning a,
.fre-form--dark .fre-form-error a,
.fre-form--dark .fre-field__warning a {
    color: #fbbf24;
}
.aisb-section--dark .fre-field--message-warning a:hover,
.aisb-section--dark .fre-form-error a:hover,
.aisb-section--dark .fre-field__warning a:hover,
.fre-form--dark .fre-field--message-warning a:hover,
.fre-form--dark .fre-form-error a:hover,
.fre-form--dark .fre-field__warning a:hover {
    color: #fcd34d;
}

/* ==========================================================================
   Primary-as-Text Dark Mode Support

   Elements that use the primary color as text need dark mode variants
   to ensure WCAG contrast compliance.
   ========================================================================== */

.aisb-section--dark .fre-progress__step--active .fre-progress__label,
.fre-form--dark .fre-progress__step--active .fre-progress__label {
    color: var(--aisb-smart-dark-section-link, var(--fre-primary-color));
}

.aisb-section--dark .fre-progress__current,
.fre-form--dark .fre-progress__current {
    color: var(--aisb-smart-dark-section-link, var(--fre-primary-color));
}

/* ==========================================================================
   Form Container
   ========================================================================== */

/* ==========================================================================
   Alignment Isolation

   Forms must always render with left-aligned content, regardless of parent
   section's text-align inheritance. This prevents form labels, inputs, and
   checkbox/radio options from being centered when placed in centered sections.
   ========================================================================== */

.fre-form {
    font-size: var(--fre-font-size);
    font-family: var(--fre-font-family);
    line-height: var(--fre-line-height);
    color: var(--fre-text-color);
    max-width: 100%;
    container-type: inline-size;
    container-name: fre-form;
    text-align: left;
}

.fre-field__label,
.fre-field__legend,
.fre-field__description,
.fre-field__error,
.fre-field__checkbox-label,
.fre-field__radio-label,
.fre-field__checkbox-text,
.fre-field__radio-text,
.fre-section__title,
.fre-section__description,
.fre-step__title,
.fre-progress__label {
    text-align: left;
}

.fre-field__input,
.fre-field__textarea,
.fre-field__select {
    text-align: left;
}

.fre-field__fieldset {
    text-align: left;
}

.fre-form__title {
    margin: 0 0 var(--fre-spacing);
    font-size: 1.5em;
    font-weight: 600;
    font-family: var(--fre-font-heading);
    color: var(--fre-text-color);
}

/* ==========================================================================
   Vertical Rhythm — Flex Column with Gap

   Every container that stacks fields/sections/rows uses the same pattern:
   flex column + gap. This means the spacing between any two siblings is the
   same single rule, regardless of whether they're plain fields, sections,
   row groups, message fields, or any combination. No `:last-child` margin
   resets, no margin collapsing edge cases, no "this looks tight when the
   one above is taller" — gap is intrinsic to the parent.

   The gap value uses `--fre-spacing-lg` (32px by default) so vertical rhythm
   between fields matches the breathing room expected in modern mobile form
   design. Inside a single field, a tighter 6px gap groups the label / input /
   description / error visually (see .fre-field rule below).

   See docs/CLAUDE.md "Field Layout System" for the full rationale.
   ========================================================================== */

.fre-form__fields,
.fre-step__fields,
.fre-section__fields {
    display: flex;
    flex-direction: column;
    gap: var(--fre-spacing-lg);
    margin-bottom: var(--fre-spacing);
}

/* The trailing margin-bottom on .fre-form__fields creates space between the
   field stack and the submit button (or step nav). On nested containers
   (.fre-step__fields, .fre-section__fields) the inner gap provides spacing
   to the next sibling already, so the trailing margin is redundant there. */
.fre-step__fields,
.fre-section__fields {
    margin-bottom: 0;
}

/* ==========================================================================
   Form Surface Treatment — opt-in card wrapper

   Applied when settings.appearance.surface = "card" on the form config. The
   PHP renderer adds the .fre-form--surface-card class to the <form> root
   element; this CSS paints it as a design-token-aware card that inherits
   colors from the parent AISB section's theme variant. Works for every form
   type because the class sits on the root — single-step, multi-step,
   conditional, webhook-enabled, all uniformly treated.

   Default (settings.appearance.surface = "none") skips this rule, so existing
   forms are visually unchanged.

   When a form is already wrapped as a card, inner .fre-section cards are
   flattened to avoid nested-card visual artifacts. The section field still
   works structurally for grouping — it just drops its visual treatment.
   ========================================================================== */

.fre-form--surface-card {
    background-color: var(--fre-surface-color);
    border: 1px solid var(--fre-border-color);
    border-radius: var(--fre-border-radius-lg);
    padding: calc(var(--fre-spacing) * 1.5);
}

.fre-form--surface-card .fre-section {
    background-color: transparent;
    border: none;
    padding: 0;
}

/* ==========================================================================
   Messages
   ========================================================================== */

.fre-form__messages {
    margin-bottom: var(--fre-spacing);
}

.fre-form__messages:empty {
    display: none;
}

.fre-form__message {
    padding: 12px 16px;
    border-radius: var(--fre-border-radius);
    margin-bottom: 10px;
}

.fre-form__message--success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.fre-form__message--error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* ==========================================================================
   Fields
   ========================================================================== */

/* ==========================================================================
   Field — Flex Column

   Each field is a flex column that stacks label / input / description / error
   with a tight 6px gap. Outer vertical spacing between fields comes from the
   parent container's `gap` (see "Vertical Rhythm" above) — NOT from a margin
   on .fre-field itself. This avoids three classes of bugs the previous
   margin-based pattern had:

     - `:last-child { margin: 0 }` edge cases when fields are reordered or
       conditionally hidden
     - "Spacing collapses when columns stack on mobile" — flex gap on the
       parent renders consistently regardless of column or row direction
     - iOS Safari `min-height: auto` grid-item bug — fields are no longer
       grid items, so the bug's CSS condition doesn't exist

   `min-width: 0` is the standard mitigation for grid/flex item content
   blowout when a long word (e.g., an autofilled email) exceeds the
   container width. Without it, the field can push its parent grid out.
   ========================================================================== */

.fre-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.fre-field__label {
    display: block;
    font-weight: 500;
    font-family: var(--fre-font-heading);
    color: var(--fre-text-color);
    /* Vertical spacing to the input below comes from .fre-field's flex gap,
       not a margin on the label. This keeps label-to-input spacing identical
       whether or not the field has a description / error placeholder. */
}

.fre-required {
    /* Uses the text-variant token so contrast stays AA-compliant against
       dark surfaces. See the --fre-error-text-color docblock at top. */
    color: var(--fre-error-text-color);
    margin-left: 2px;
}

.fre-field__input,
.fre-field__textarea,
.fre-field__select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: inherit;
    font-family: var(--fre-font-family);
    line-height: var(--fre-line-height);
    color: var(--fre-text-color);
    background-color: var(--fre-background-color);
    border: 1px solid var(--fre-border-color);
    border-radius: var(--fre-border-radius);
    transition: border-color var(--fre-transition-fast), box-shadow var(--fre-transition-fast);
    box-sizing: border-box;
    /* Belt-and-suspenders against intrinsic-sizing edge cases on iOS Safari.
       The primary fix for the iOS thin-field bug is removing grid-item
       context from .fre-field (it's now flex, not grid — see .fre-field
       rule above). But an explicit min-height floor on the input itself
       defends against any other engine quirk where an empty input without
       a placeholder might compute a sub-pixel intrinsic height.

       Math: padding (10*2) + border (1*2) = 22px non-content. line-height ×
       1em = 24px with current tokens. Total floor = 46px = the height the
       input naturally computes when filled. Scales correctly if
       --fre-line-height or the inherited font-size changes. */
    min-height: calc(var(--fre-line-height) * 1em + 22px);
}

.fre-field__input:focus,
.fre-field__textarea:focus,
.fre-field__select:focus {
    outline: none;
    border-color: var(--fre-primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fre-primary-color) 20%, transparent);
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .fre-field__input:focus,
    .fre-field__textarea:focus,
    .fre-field__select:focus {
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    }
}

.fre-field__input:disabled,
.fre-field__textarea:disabled,
.fre-field__select:disabled {
    background-color: var(--fre-surface-color);
    cursor: not-allowed;
    opacity: 0.7;
}

.fre-field__textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select.

   The dropdown chevron is a background-image data-URI SVG with a hardcoded
   stroke color. CSS custom properties cannot be interpolated inside data
   URIs, so context-aware coloring requires two separate SVGs — one whose
   stroke matches the light-mode muted-text color (`#6b7280`), and one
   below in the dark-mode override block whose stroke matches the dark-mode
   muted-text color (`#9ca3af`).

   The previous implementation used `#333` (near-black) for the stroke,
   which was invisible against dark-mode form surfaces. The new muted-gray
   values track FRE's `--fre-text-muted` token in both modes and clear the
   WCAG 3:1 contrast requirement for non-text UI on every supported
   surface (white, light surface, dark `#1a1a1a` background, dark `#2a2a2a`
   surface). */
.fre-field__select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 40px;
}

/* Dark-mode select chevron — see docblock above. */
.aisb-section--dark .fre-form .fre-field__select,
.fre-form--dark .fre-field__select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* File Input */
.fre-field__file {
    padding: 8px;
}

.fre-field__file-info {
    margin: 6px 0 0;
    font-size: 0.875em;
    color: var(--fre-text-muted);
}

/* ==========================================================================
   Checkboxes and Radios
   ========================================================================== */

.fre-field__fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.fre-field__legend {
    font-weight: 500;
    margin-bottom: 8px;
    padding: 0;
}

.fre-field__checkbox-label,
.fre-field__radio-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    margin-bottom: 8px;
}

.fre-field__checkbox,
.fre-field__radio {
    margin: 4px 10px 0 0;
    flex-shrink: 0;
}

.fre-field__checkbox-text,
.fre-field__radio-text {
    flex: 1;
}

/* Inline layout */
.fre-field__checkbox-group--inline,
.fre-field__radio-group--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.fre-field__checkbox-group--inline .fre-field__checkbox-label,
.fre-field__radio-group--inline .fre-field__radio-label {
    margin-bottom: 0;
}

/* Single checkbox */
.fre-field--checkbox-single .fre-field__checkbox-label {
    margin-bottom: 0;
}

/* ==========================================================================
   Description
   ========================================================================== */

.fre-field__description {
    margin: 6px 0 0;
    font-size: 0.875em;
    color: var(--fre-text-muted);
}

/* ==========================================================================
   Errors
   ========================================================================== */

.fre-field__error {
    font-size: 0.875em;
    /* Inline validation error text — uses the AA-compliant text variant
       so it stays readable on both light and dark form surfaces. */
    color: var(--fre-error-text-color);
    margin-top: 6px;
}

.fre-field__error:empty {
    display: none;
}

.fre-field--has-error .fre-field__input,
.fre-field--has-error .fre-field__textarea,
.fre-field--has-error .fre-field__select {
    border-color: var(--fre-error-color);
}

.fre-field--has-error .fre-field__input:focus,
.fre-field--has-error .fre-field__textarea:focus,
.fre-field--has-error .fre-field__select:focus {
    /* Previously hardcoded `rgba(220, 53, 69, 0.15)` — a Bootstrap-era
       red unrelated to the rest of FRE's tokens. Now derives from the
       --fre-error-color token via the --fre-error-focus-ring variable,
       so it stays in sync if a site customizes --aisb-color-error and
       gets a stronger 30% opacity in dark mode for visibility. */
    box-shadow: 0 0 0 3px var(--fre-error-focus-ring);
}

/* ==========================================================================
   Message Field
   ========================================================================== */

.fre-field--message {
    padding: 16px;
    border-radius: var(--fre-border-radius);
    background-color: var(--fre-surface-color);
    border: 1px solid var(--fre-border-color);
}

.fre-field__message-heading {
    margin: 0 0 8px;
    font-size: 1.1em;
}

.fre-field__message-content p:last-child {
    margin-bottom: 0;
}

/* Message variants */
.fre-field--message-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.fre-field--message-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.fre-field--message-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.fre-field--message-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.fre-form__submit {
    margin-top: calc(var(--fre-spacing) * 1.5);
}

.fre-form__submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: inherit;
    font-family: var(--fre-button-font);
    font-weight: var(--fre-button-weight);
    text-transform: var(--fre-button-transform);
    letter-spacing: var(--fre-button-letter-spacing);
    color: var(--fre-button-text);
    background-color: var(--fre-button-bg);
    border: none;
    border-radius: var(--fre-border-radius-button);
    cursor: pointer;
    transition: background-color var(--fre-transition-fast), transform var(--fre-transition-fast), box-shadow var(--fre-transition-fast);
    min-width: 120px;
}

.fre-form__submit-button:hover:not(:disabled) {
    background-color: var(--fre-button-hover-bg);
}

.fre-form__submit-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fre-primary-color) 30%, transparent);
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .fre-form__submit-button:focus {
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    }
}

.fre-form__submit-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.fre-form__submit-loading {
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.fre-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fre-spin 0.8s linear infinite;
}

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

/* ==========================================================================
   Honeypot (Hidden)
   ========================================================================== */

.fre-form__hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

/* ==========================================================================
   Form Error State
   ========================================================================== */

.fre-form-error {
    padding: 12px 16px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--fre-border-radius);
    color: #856404;
    margin-bottom: var(--fre-spacing);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ==========================================================================
   Column Layout — 12-Column Grid (no subgrid)

   `.fre-row` wraps 1-4 consecutive fields whose `column` attribute is set
   (e.g., `1/2`, `1/3`, `2/3`, `1/4`, `3/4`). At desktop width, fields share
   a row with column-gap between them. At narrow viewports (<399px container
   width), the container query below collapses to a single column and row-gap
   handles the now-vertical spacing.

   Design trade-off (intentional): when adjacent columns have labels of
   different line counts (e.g., "Your Name" + "Phone Number (with country
   code)"), their inputs no longer auto-align at the same vertical position
   the way the previous grid+subgrid pattern enforced. In practice this
   rarely matters because:

     - Most form labels are single-line in modern UI
     - When labels do wrap awkwardly, the design fix is to shorten the
       label, not to force layout alignment
     - The `description` field provides a "spacer" line below shorter
       labels if alignment is critical for a specific form

   We accept the trade-off because the previous subgrid pattern introduced
   two real production bugs (iOS Safari thin-field on empty placeholderless
   inputs; lost vertical spacing on mobile column-collapse) that affected
   every form using the `column` attribute. Simpler is more robust here.

   Modern form libraries (Mantine, Chakra, Shadcn/ui, Polaris, HubSpot
   Forms) all use this same flex/grid + gap pattern for the same reasons.
   ========================================================================== */

.fre-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--fre-spacing);
    row-gap: var(--fre-spacing-lg);
}

/* Column spans (semantics unchanged from previous subgrid layout). */
.fre-col--1-2 { grid-column: span 6; }
.fre-col--1-3 { grid-column: span 4; }
.fre-col--2-3 { grid-column: span 8; }
.fre-col--1-4 { grid-column: span 3; }
.fre-col--3-4 { grid-column: span 9; }

/* ==========================================================================
   Sections
   ========================================================================== */

.fre-section {
    margin-bottom: calc(var(--fre-spacing) * 1.5);
    padding: var(--fre-spacing);
    background-color: var(--fre-surface-color);
    border: 1px solid var(--fre-border-color);
    border-radius: var(--fre-border-radius-lg, var(--fre-border-radius));
}

.fre-section__title {
    margin: 0 0 calc(var(--fre-spacing) * 0.5);
    font-size: 1.1em;
    font-weight: 600;
    font-family: var(--fre-font-heading);
    color: var(--fre-text-color);
}

.fre-section__description {
    margin: 0 0 var(--fre-spacing);
    font-size: 0.9em;
    color: var(--fre-text-muted);
}

/* .fre-section__fields layout (flex column with gap) is defined in the
   "Vertical Rhythm" rule block near the top of this file alongside
   .fre-form__fields and .fre-step__fields — kept together so the three
   container patterns are visible side-by-side.

   Note: there's no longer a `:last-child { margin-bottom: 0 }` rule because
   gap-based spacing doesn't apply trailing space after the last child by
   definition. One less edge case. */

/* ==========================================================================
   Conditional Logic
   ========================================================================== */

.fre-field--hidden,
.fre-section--hidden {
    display: none !important;
}

/* Transition for show/hide (when not using display:none) */
.fre-field--conditional {
    transition: opacity 0.2s ease-in-out, max-height 0.3s ease-in-out;
}

/* ==========================================================================
   Multi-Step Forms
   ========================================================================== */

.fre-form--multistep {
    /* Container for multi-step form */
}

/* Progress Indicators */
.fre-progress {
    margin-bottom: calc(var(--fre-spacing) * 1.5);
    padding-bottom: calc(var(--fre-spacing) * 0.5);
}

/* Steps style progress */
.fre-progress--steps .fre-progress__steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.fre-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.fre-progress__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--fre-surface-color);
    color: var(--fre-text-muted);
    font-weight: 600;
    font-size: 0.875em;
    transition: all var(--fre-transition-base);
}

.fre-progress__step--active .fre-progress__number,
.fre-progress__step--completed .fre-progress__number {
    background-color: var(--fre-primary-color);
    color: var(--fre-button-text);
}

.fre-progress__label {
    margin-top: 6px;
    font-size: 0.8em;
    color: var(--fre-text-muted);
    text-align: center;
    max-width: 100px;
}

.fre-progress__step--active .fre-progress__label {
    color: var(--aisb-smart-light-section-link, var(--fre-primary-color));
    font-weight: 500;
}

.fre-progress__connector {
    flex: 1;
    height: 2px;
    background-color: var(--fre-border-color);
    margin: 15px 8px 0;
    transition: background-color var(--fre-transition-base);
}

.fre-progress__step--completed + .fre-progress__connector {
    background-color: var(--fre-primary-color);
}

/* Dots style progress */
.fre-progress--dots .fre-progress__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fre-progress--dots .fre-progress__step {
    flex-direction: row;
}

.fre-progress__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--fre-border-color);
    transition: all var(--fre-transition-base);
}

.fre-progress--dots .fre-progress__step--active .fre-progress__dot {
    background-color: var(--fre-primary-color);
    transform: scale(1.2);
}

.fre-progress--dots .fre-progress__step--completed .fre-progress__dot {
    background-color: var(--fre-primary-color);
}

.fre-progress--dots .fre-progress__connector {
    width: 20px;
    margin: 0;
}

/* Bar style progress */
.fre-progress--bar {
    text-align: center;
}

.fre-progress__bar {
    height: 6px;
    background-color: var(--fre-border-color);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.fre-progress__fill {
    height: 100%;
    background-color: var(--fre-primary-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.fre-progress__text {
    font-size: 0.875em;
    color: var(--fre-text-muted);
}

.fre-progress__current {
    font-weight: 600;
    color: var(--aisb-smart-light-section-link, var(--fre-primary-color));
}

/* Bar container for adaptive progress switching */
.fre-progress__bar-container {
    text-align: center;
}

.fre-progress__bar-container .fre-progress__bar {
    margin-bottom: 8px;
}

.fre-progress__bar-container .fre-progress__text {
    font-size: 0.875em;
    color: var(--fre-text-muted);
}

/* Steps */
.fre-step {
    display: none;
}

.fre-step--active {
    display: block;
}

.fre-step__title {
    margin: 0 0 var(--fre-spacing);
    font-size: 1.2em;
    font-weight: 600;
    font-family: var(--fre-font-heading);
    color: var(--fre-text-color);
}

.fre-step__fields {
    margin-bottom: var(--fre-spacing);
}

.fre-step__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--fre-spacing);
    margin-top: calc(var(--fre-spacing) * 1.5);
    padding-top: var(--fre-spacing);
    border-top: 1px solid var(--fre-border-color);
}

.fre-step__nav:has(.fre-step__prev):not(:has(.fre-step__next)):not(:has(.fre-step__submit)) {
    justify-content: flex-start;
}

.fre-step__nav:not(:has(.fre-step__prev)):has(.fre-step__next),
.fre-step__nav:not(:has(.fre-step__prev)):has(.fre-step__submit) {
    justify-content: flex-end;
}

/* Step navigation buttons */
.fre-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: inherit;
    font-family: var(--fre-button-font);
    font-weight: var(--fre-button-weight);
    text-transform: var(--fre-button-transform);
    letter-spacing: var(--fre-button-letter-spacing);
    border: none;
    border-radius: var(--fre-border-radius-button);
    cursor: pointer;
    transition: all var(--fre-transition-fast);
    min-width: 120px;
}

.fre-btn--primary {
    background-color: var(--fre-button-bg);
    color: var(--fre-button-text);
}

.fre-btn--primary:hover:not(:disabled) {
    background-color: var(--fre-button-hover-bg);
}

.fre-btn--secondary {
    background-color: transparent;
    color: var(--fre-ghost-color);
    border: 2px solid var(--fre-ghost-color);
    /* Reduce padding by 2px to account for border, keeping total size consistent */
    padding: 10px 22px;
}

.fre-btn--secondary:hover:not(:disabled) {
    background-color: var(--fre-ghost-hover-bg);
    border-color: var(--fre-ghost-hover-bg);
    color: var(--fre-ghost-hover-text);
}

.fre-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.fre-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fre-primary-color) 30%, transparent);
}

.fre-btn--secondary:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fre-ghost-color) 30%, transparent);
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .fre-btn:focus {
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    }

    .fre-btn--secondary:focus {
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    }
}

/* ==========================================================================
   AISB Hover Effect Integration

   Responds to Global Settings hover style choices via body classes.
   These classes are added by AISB when hover effects are configured.
   ========================================================================== */

/* Lift Effect - Button raises up with shadow */
body.aisb-hover-lift .fre-form__submit-button:hover:not(:disabled),
body.aisb-hover-lift .fre-btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Scale Effect - Button grows slightly */
body.aisb-hover-scale .fre-form__submit-button:hover:not(:disabled),
body.aisb-hover-scale .fre-btn--primary:hover:not(:disabled) {
    transform: scale(1.03);
}

/* Glow Effect - Soft color glow around button */
body.aisb-hover-glow .fre-form__submit-button:hover:not(:disabled),
body.aisb-hover-glow .fre-btn--primary:hover:not(:disabled) {
    box-shadow: 0 0 20px var(--fre-button-glow-color);
}

/* None Effect - Disable hover transitions */
body.aisb-hover-none .fre-form__submit-button:hover:not(:disabled),
body.aisb-hover-none .fre-btn--primary:hover:not(:disabled) {
    background-color: var(--fre-button-bg);
    transform: none;
    box-shadow: none;
}

/* Reduced Motion Accessibility - Disable transform-based hover effects */
@media (prefers-reduced-motion: reduce) {
    body.aisb-hover-lift .fre-form__submit-button:hover,
    body.aisb-hover-lift .fre-btn--primary:hover,
    body.aisb-hover-scale .fre-form__submit-button:hover,
    body.aisb-hover-scale .fre-btn--primary:hover {
        transform: none;
    }
}

/* Step validation error state */
.fre-step--has-errors {
    /* Visual indicator that step has errors */
}

.fre-progress__step--error .fre-progress__number {
    background-color: var(--fre-error-color);
    color: var(--fre-button-text, #fff);
}

/* ==========================================================================
   Date Field
   ========================================================================== */

.fre-field__input--date {
    /* Keep native date picker appearance for calendar icon visibility */
    position: relative;
}

/* Calendar icon for WebKit browsers */
.fre-field__input--date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.fre-field__input--date::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Prevent date picker from being too narrow */
.fre-field__input--date {
    min-width: 150px;
    color-scheme: light;
}

/* Dark mode - invert the calendar icon for visibility */
.fre-form--dark .fre-field__input--date,
.aisb-section--dark .fre-form .fre-field__input--date {
    color-scheme: dark;
}

.fre-form--dark .fre-field--date .fre-field__input--date::-webkit-calendar-picker-indicator,
.aisb-section--dark .fre-form .fre-field--date .fre-field__input--date::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.8;
}

.fre-form--dark .fre-field--date .fre-field__input--date::-webkit-calendar-picker-indicator:hover,
.aisb-section--dark .fre-form .fre-field--date .fre-field__input--date::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ==========================================================================
   Address Field
   ========================================================================== */

.fre-field__input--address {
    /* Ensure autocomplete dropdown appears correctly */
    position: relative;
}

/* Google Places Autocomplete dropdown styling */
.pac-container {
    font-family: inherit;
    font-size: var(--fre-font-size, 16px);
    border-radius: var(--fre-border-radius, 4px);
    border: 1px solid var(--fre-border-color, #ddd);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 2px;
    z-index: 10000;
}

.pac-container .pac-item {
    padding: 10px 12px;
    cursor: pointer;
    border-top: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
}

.pac-container .pac-item:first-child {
    border-top: none;
}

.pac-container .pac-item:hover,
.pac-container .pac-item.pac-item-selected {
    background-color: #f5f5f5;
}

.pac-container .pac-item-query {
    font-weight: 500;
    color: #333;
}

.pac-container .pac-matched {
    font-weight: 600;
}

/* Address field warning message */
.fre-field__warning {
    margin: 8px 0 0;
    padding: 8px 12px;
    font-size: 0.875em;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--fre-border-radius, 4px);
    color: #856404;
}

.fre-field__warning a {
    color: #856404;
    font-weight: 500;
}

.fre-field__warning a:hover {
    color: #533f03;
}

/* ==========================================================================
   Container Query - Stack Columns (< 400px)

   Threshold is the point at which a 2-column layout becomes visually too
   tight: below 400px the columns drop under ~180px each which can't
   comfortably fit a select placeholder or a two-word label. Above this
   threshold multi-column layouts stay 2-col.

   Historical note: this threshold used to be 479px, chosen for a flat form
   with no internal chrome. After settings.appearance.surface="card" was
   introduced, the card's 36px internal padding reduced the inline-size the
   container query measures by 72px, causing the 479px threshold to fire at
   form widths that were still plenty wide enough for 2-col. 399px leaves
   headroom for any reasonable padding and reflects the true "too narrow"
   point for a two-column form.
   ========================================================================== */

@container fre-form (max-width: 399px) {
    .fre-row {
        /* Collapse to a single column — every field spans the full width
           below the stacking breakpoint. */
        grid-template-columns: 1fr;
    }

    .fre-col--1-2,
    .fre-col--1-3,
    .fre-col--2-3,
    .fre-col--1-4,
    .fre-col--3-4 {
        grid-column: 1 / -1;
    }

    .fre-field__checkbox-group--inline,
    .fre-field__radio-group--inline {
        flex-direction: column;
        gap: 8px;
    }
}

/* ==========================================================================
   Container Query - Progress Indicator & Nav (< 400px)
   ========================================================================== */

@container fre-form (max-width: 400px) {
    /* Hide step labels, keep numbers */
    .fre-progress--steps .fre-progress__label {
        display: none;
    }

    /* Reduce step number size */
    .fre-progress__number {
        width: 28px;
        height: 28px;
        font-size: 0.8em;
    }

    /* Tighten connector margins */
    .fre-progress__connector {
        margin: 13px 6px 0;
    }

    /* Stack navigation buttons full-width on mobile.

       The desktop default has `align-items: center` (so prev/next align
       vertically in the row layout). On mobile we flip to column-reverse
       direction AND switch align-items to `stretch` — that single change
       makes every flex item (both `.fre-btn` prev/next buttons AND the
       `.fre-form__submit` wrapper around the last-step submit) span the
       full width naturally, without needing brittle per-button `width: 100%`
       overrides that have to be kept in sync with the button class set.

       Without `align-items: stretch`, the prev/next buttons LOOKED full-width
       only because the `.fre-btn` base rule below has its own width
       declaration; the last-step submit is wrapped in `.fre-form__submit`
       so the wrapper was the actual constraint, sized to its inline-flex
       button's content. Bug fixed at the layout level, not patched at the
       button class level. */
    .fre-step__nav {
        flex-direction: column-reverse;
        gap: 0.75rem;
        align-items: stretch;
    }

    /* Buttons inside the now-stretching step nav still need explicit
       full-width on the .fre-btn (because the base rule fixes its display
       to inline-flex without a width) AND on the submit button (same
       reason; .fre-form__submit-button is inline-flex by default). The
       wrapper around the submit now stretches to full width thanks to
       align-items: stretch above, so the button's width: 100% finally
       resolves to the full step nav width. */
    .fre-step__nav .fre-btn,
    .fre-step__nav .fre-form__submit-button {
        width: 100%;
    }
}

/* ==========================================================================
   Container Query - Ultra-Narrow (< 320px)
   ========================================================================== */

@container fre-form (max-width: 320px) {
    .fre-progress__number {
        width: 24px;
        height: 24px;
        font-size: 0.75em;
    }

    .fre-progress__connector {
        margin: 11px 4px 0;
    }

    .fre-btn {
        padding: 8px 16px;
        min-width: auto;
    }

    .fre-form__submit-button {
        width: 100%;
    }
}

/* ==========================================================================
   Fallback for Browsers Without Container Query Support
   ========================================================================== */

@supports not (container-type: inline-size) {
    @media (max-width: 500px) {
        .fre-form__submit-button {
            width: 100%;
        }

        .fre-field__checkbox-group--inline,
        .fre-field__radio-group--inline {
            flex-direction: column;
            gap: 8px;
        }

        /* Stack columns on mobile (legacy fallback for browsers without
           container queries — grid-based equivalent of the 399px container
           rule. Uses a slightly wider threshold because we're measuring the
           viewport, not the form; most mobile viewports that need stacking
           are ≤ 500px). */
        .fre-row {
            grid-template-columns: 1fr;
        }

        .fre-col--1-2,
        .fre-col--1-3,
        .fre-col--2-3,
        .fre-col--1-4,
        .fre-col--3-4 {
            grid-column: 1 / -1;
        }

        /* Progress adjustments */
        .fre-progress--steps .fre-progress__label {
            display: none;
        }

        .fre-progress__connector {
            margin: 15px 4px 0;
        }

        /* Step nav stacking. align-items: stretch is the key piece — see
           the container-query equivalent above for the full rationale. */
        .fre-step__nav {
            flex-direction: column-reverse;
            align-items: stretch;
        }

        .fre-step__nav .fre-btn,
        .fre-step__nav .fre-form__submit-button {
            width: 100%;
        }
    }
}