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

   ⚠  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.
   ========================================================================== */

:root {
    /* 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 */
    --fre-error-color: var(--aisb-color-error, #ef4444);
    --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)));
}

/* ==========================================================================
   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);
}

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

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

.fre-field {
    margin-bottom: calc(var(--fre-spacing) * 1.25);
}

.fre-field__label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-family: var(--fre-font-heading);
    color: var(--fre-text-color);
}

.fre-required {
    color: var(--fre-error-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;
}

.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 */
.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='%23333' 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;
}

/* 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;
    color: var(--fre-error-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 {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

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

   Uses CSS Grid with subgrid so every field in a row shares the same vertical
   rhythm regardless of label length. The row is a 12-column grid; each field
   spans 3/4/6/8/9 columns according to its .fre-col--* class. Inside each
   field, grid-template-rows:subgrid inherits 4 rows from the parent:

       Row 1 — .fre-field__label
       Row 2 — input element (select, textarea, fieldset, file, wrapper, etc.)
       Row 3 — .fre-field__description (empty row when no description)
       Row 4 — .fre-field__error

   Explicit grid-row assignments pin label/description/error to their rows;
   the input slot auto-places into the remaining row 2. This means a 2-line
   label in column A no longer pushes its input out of alignment with the
   1-line-label input in column B — subgrid forces both inputs onto row 2
   with the same height contribution.

   Subgrid is supported in all baseline browsers as of 2026 (Firefox 71+,
   Safari 16+, Chrome/Edge 117+). No JS, no :has() dependency, no runtime
   measurement.
   ========================================================================== */

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

/* Column spans */
.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; }

/* Each field inside a row becomes a 4-row subgrid, so labels / inputs /
   descriptions / errors align across all siblings in the row. */
.fre-row > .fre-field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    box-sizing: border-box;
}

/* Pin known child classes to their rows. The input element has no universal
   class (it could be .fre-field__input / __select / __textarea / __fieldset /
   __file / etc.), so we leave it unpinned — grid auto-placement drops it into
   row 2, the only remaining slot. */
.fre-row > .fre-field > .fre-field__label       { grid-row: 1; }
.fre-row > .fre-field > .fre-field__description { grid-row: 3; }
.fre-row > .fre-field > .fre-field__error       { grid-row: 4; }

/* ==========================================================================
   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 {
    /* Reset background for nested fields */
}

.fre-section__fields > .fre-field:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   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 */
    .fre-step__nav {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .fre-step__nav .fre-btn {
        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 */
        .fre-step__nav {
            flex-direction: column-reverse;
        }

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