/*
 * LocaLeaf — Forminator brand overrides
 *
 * Applies parchment background, terracotta accent, typewriter headings, and
 * brand-aligned input/button styling to Forminator multi-step forms.
 * Targeted at /marche-forminator/ but safe site-wide.
 */

.forminator-ui,
.forminator-custom-form,
[class*="forminator-design"] {
    --ll-base:            #FAF8EB;
    --ll-base-soft:       #FFFFFF;
    --ll-contrast:        #111111;
    --ll-accent-1:        #D3783F;
    --ll-accent-1-dark:   #B86530;
    --ll-accent-1-tint:   #FBEEDF;
    --ll-accent-2:        #8AA16C;
    --ll-accent-4:        #666666;
    --ll-border:          rgba(17, 17, 17, 0.18);
    --ll-border-soft:     rgba(17, 17, 17, 0.10);
    --ll-shadow:          0 1px 2px rgba(17, 17, 17, 0.05);
    --ll-font-display:    var(--wp--preset--font-family--special-elite, 'Special Elite', cursive);
    --ll-font-body:       var(--wp--preset--font-family--dm-sans, 'DM Sans', sans-serif);
}

/* ── Outer card ──────────────────────────────────────────────────────────── */
.forminator-ui.forminator-custom-form {
    background: var(--ll-base) !important;
    border: 1px solid var(--ll-border-soft) !important;
    border-radius: 6px !important;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px) clamp(28px, 4vw, 48px) !important;
    box-shadow: var(--ll-shadow) !important;
    font-family: var(--ll-font-body) !important;
    color: var(--ll-contrast) !important;
    max-width: 760px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

/* ── Pagination header (step dots + labels at top) ──────────────────────── */
.forminator-ui .forminator-pagination,
.forminator-ui .forminator-pagination-header,
.forminator-ui .forminator-steps {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 0 28px !important;
    padding: 0 0 18px !important;
    list-style: none !important;
    border-bottom: 1px solid var(--ll-border-soft) !important;
}
.forminator-ui .forminator-pagination .forminator-step,
.forminator-ui .forminator-pagination-step {
    flex: 1 1 0 !important;
    text-align: center !important;
    font-family: var(--ll-font-display) !important;
    font-size: 14px !important;
    color: var(--ll-accent-4) !important;
    position: relative !important;
}
.forminator-ui .forminator-pagination .forminator-step--active,
.forminator-ui .forminator-pagination .forminator-step.is-current,
.forminator-ui .forminator-pagination-step.is-current,
.forminator-ui .forminator-pagination-step--current,
.forminator-ui .forminator-pagination-step.forminator-pagination-step--current {
    color: var(--ll-contrast) !important;
}

/* Pagination steps container */
.forminator-ui .forminator-pagination-steps,
.forminator-ui [role="tablist"].forminator-pagination-steps {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 0 18px !important;
    margin: 0 0 28px !important;
    border-bottom: 1px solid var(--ll-border-soft) !important;
    align-items: center !important;
}
/* Default (inactive) step button — muted */
.forminator-ui .forminator-pagination-steps .forminator-step {
    background: transparent !important;
    border: 0 !important;
    color: var(--ll-accent-4) !important;
    font-family: var(--ll-font-display) !important;
    font-size: 14px !important;
    padding: 6px 4px !important;
    flex: 1 1 0 !important;
    text-align: center !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}
/* Step dot below the label */
.forminator-ui .forminator-pagination-steps .forminator-step-dot {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: var(--ll-border-soft) !important;
    border: 2px solid var(--ll-border-soft) !important;
    flex-shrink: 0 !important;
}
/* Current step — bold label + filled terracotta dot */
.forminator-ui .forminator-pagination-steps .forminator-step.forminator-current,
.forminator-ui .forminator-pagination-steps .forminator-step[aria-selected="true"] {
    color: var(--ll-contrast) !important;
    font-weight: 600 !important;
}
.forminator-ui .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-dot,
.forminator-ui .forminator-pagination-steps .forminator-step[aria-selected="true"] .forminator-step-dot {
    background: var(--ll-accent-1) !important;
    border-color: var(--ll-accent-1) !important;
    box-shadow: 0 0 0 3px rgba(211,120,63,.18) !important;
}
/* Past (completed) steps */
.forminator-ui .forminator-pagination-steps .forminator-step.forminator-passed .forminator-step-dot,
.forminator-ui .forminator-pagination-steps .forminator-step.forminator-completed .forminator-step-dot {
    background: var(--ll-accent-1-tint) !important;
    border-color: var(--ll-accent-1) !important;
}
.forminator-ui .forminator-pagination-steps .forminator-step.forminator-passed,
.forminator-ui .forminator-pagination-steps .forminator-step.forminator-completed {
    color: var(--ll-accent-1) !important;
}
/* The thin connector "break" between steps */
.forminator-ui .forminator-pagination-steps .forminator-break {
    flex: 1 1 0 !important;
    height: 2px !important;
    background: var(--ll-border-soft) !important;
    align-self: center !important;
    margin-top: 24px !important;  /* aligns to the dot */
}

/* Connector line between step dots */
.forminator-ui .forminator-pagination-progress,
.forminator-ui [class*="pagination"] .progress-line,
.forminator-ui [class*="pagination"]::before {
    background: var(--ll-border-soft) !important;
}
.forminator-ui .forminator-pagination-progress-bar,
.forminator-ui [class*="pagination"] .progress-line-fill {
    background: var(--ll-accent-1) !important;
}

/* ── Question labels ────────────────────────────────────────────────────── */
.forminator-ui .forminator-label,
.forminator-ui label.forminator-label,
.forminator-ui .forminator-field label:not(.forminator-radio):not(.forminator-checkbox) {
    font-family: var(--ll-font-display) !important;
    font-size: 18px !important;
    color: var(--ll-contrast) !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
    display: block !important;
}
.forminator-ui .forminator-required {
    color: var(--ll-accent-1) !important;
}
.forminator-ui .forminator-description,
.forminator-ui .forminator-helper {
    color: var(--ll-accent-4) !important;
    font-size: 13px !important;
    font-style: italic !important;
}

.forminator-ui .forminator-field {
    margin-bottom: 28px !important;
}

/* ── Text / email / number / textarea inputs ──────────────────────────── */
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="url"],
.forminator-ui input[type="number"],
.forminator-ui textarea,
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea {
    background: var(--ll-base-soft) !important;
    border: 1px solid var(--ll-border) !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    color: var(--ll-contrast) !important;
    font-family: inherit !important;
    width: 100% !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.forminator-ui input:focus,
.forminator-ui textarea:focus,
.forminator-ui select:focus {
    border-color: var(--ll-accent-1) !important;
    box-shadow: 0 0 0 3px rgba(211,120,63,.18) !important;
    outline: 0 !important;
}

/* ── Select dropdowns ───────────────────────────────────────────────────── */
.forminator-ui select,
.forminator-ui .forminator-select {
    background: var(--ll-base-soft) !important;
    border: 1px solid var(--ll-border) !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    color: var(--ll-contrast) !important;
    font-size: 16px !important;
    font-family: inherit !important;
}

/* ── Radio + checkbox pills ────────────────────────────────────────────── */
/* The label IS the pill. We use `display: block` so the entire box is the
   click target, and stretch the inner text span to fill the line so there's
   no "dead" area on the right side. */
.forminator-ui .forminator-radio,
.forminator-ui .forminator-checkbox,
.forminator-ui label.forminator-radio,
.forminator-ui label.forminator-checkbox {
    display: block !important;
    position: relative !important;
    background: var(--ll-base-soft) !important;
    border: 1px solid var(--ll-border) !important;
    border-radius: 4px !important;
    padding: 12px 16px 12px 46px !important;  /* left padding for the bullet */
    margin: 0 0 8px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    color: var(--ll-contrast) !important;
    font-family: inherit !important;
    transition: background .15s, border-color .15s, box-shadow .15s !important;
    min-height: 46px !important;
    line-height: 1.4 !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.forminator-ui .forminator-radio:hover,
.forminator-ui .forminator-checkbox:hover {
    background: var(--ll-accent-1-tint) !important;
    border-color: var(--ll-accent-1) !important;
}
/* Selected state via :has() */
.forminator-ui .forminator-radio:has(input:checked),
.forminator-ui .forminator-checkbox:has(input:checked) {
    background: var(--ll-accent-1-tint) !important;
    border-color: var(--ll-accent-1) !important;
}
/* Focus state — terracotta ring, not black */
.forminator-ui .forminator-radio:focus,
.forminator-ui .forminator-checkbox:focus,
.forminator-ui .forminator-radio:focus-within,
.forminator-ui .forminator-checkbox:focus-within {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(211,120,63,.28) !important;
    border-color: var(--ll-accent-1) !important;
}

/* Hide the real input but keep it interactable + focusable */
.forminator-ui .forminator-radio input[type="radio"],
.forminator-ui .forminator-checkbox input[type="checkbox"] {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: var(--ll-accent-1) !important;
    cursor: pointer !important;
}
/* Suppress Forminator's custom bullet/check graphics — the real input is
   now visible. */
.forminator-ui .forminator-radio .forminator-radio-bullet,
.forminator-ui .forminator-checkbox .forminator-checkbox-box {
    display: none !important;
}
.forminator-ui .forminator-radio .forminator-radio-label,
.forminator-ui .forminator-checkbox .forminator-checkbox-label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ── Buttons: Previous / Next / Submit ─────────────────────────────────── */
.forminator-ui button,
.forminator-ui .forminator-button,
.forminator-ui .forminator-button-submit,
.forminator-ui button.forminator-button-next,
.forminator-ui button.forminator-button-back {
    font-family: var(--ll-font-body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    border: 1px solid var(--ll-accent-1) !important;
    background: var(--ll-accent-1) !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: background .15s, color .15s, border-color .15s !important;
    box-shadow: none !important;
    min-height: 44px !important;
}
.forminator-ui button.forminator-button-back {
    background: transparent !important;
    color: var(--ll-accent-1) !important;
}
.forminator-ui button:hover,
.forminator-ui .forminator-button:hover,
.forminator-ui button.forminator-button-next:hover,
.forminator-ui .forminator-button-submit:hover {
    background: var(--ll-accent-1-dark) !important;
    border-color: var(--ll-accent-1-dark) !important;
    color: #FFFFFF !important;
}
.forminator-ui button.forminator-button-back:hover {
    background: var(--ll-accent-1-tint) !important;
    color: var(--ll-accent-1-dark) !important;
    border-color: var(--ll-accent-1-dark) !important;
}

/* Make Next/Prev button-row align nicely. Tight spacing per UX feedback. */
.forminator-ui .forminator-pagination-footer,
.forminator-ui .forminator-row.forminator-pagination,
.forminator-ui .forminator-page-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
}
/* Visible pagination panel — zero out the panel's own bottom padding/margin
   (Forminator stacks 18px padding + 28px margin = 46px of dead space). */
.forminator-ui .forminator-pagination,
.forminator-ui .forminator-pagination[style*="visibility: visible"],
.forminator-ui .forminator-pagination:not([hidden]):not([aria-hidden="true"]) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.forminator-ui .forminator-pagination--content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Forminator's <hr> or border separator between content and footer */
.forminator-ui .forminator-pagination--content + hr,
.forminator-ui .forminator-pagination hr,
.forminator-ui .forminator-pages-wrapper hr {
    display: none !important;
}
/* Drop Forminator's default bottom-margin on the last field of a step */
.forminator-ui .forminator-pagination--content .forminator-row:last-child,
.forminator-ui .forminator-pagination--content .forminator-row {
    margin-bottom: 10px !important;
}
.forminator-ui .forminator-pagination--content .forminator-row:last-of-type {
    margin-bottom: 0 !important;
}
.forminator-ui .forminator-field {
    margin-bottom: 16px !important;
}
.forminator-ui .forminator-pagination--content .forminator-field:last-child,
.forminator-ui .forminator-pagination--content .forminator-row:last-of-type .forminator-field {
    margin-bottom: 0 !important;
}
/* The submit button row at the very end of the form */
.forminator-ui .forminator-pages-wrapper > .forminator-row,
.forminator-ui form > .forminator-row {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}
/* Force the page wrapper to not stretch with min-height — kills the giant
   gap on short steps. */
.forminator-ui .forminator-pagination,
.forminator-ui .forminator-pagination--content {
    min-height: 0 !important;
    height: auto !important;
}
/* Fully collapse hidden tab panels (Forminator leaves them ~47px tall each,
   so 4 hidden panels add ~188px of dead whitespace between the last field
   and the buttons on every step except the last). */
.forminator-ui .forminator-pagination[hidden],
.forminator-ui .forminator-pagination[aria-hidden="true"],
.forminator-ui .forminator-pagination[style*="display: none"],
.forminator-ui .forminator-pagination[style*="visibility: hidden"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* ── Kill the black focus outline on .forminator-row (Forminator focuses
   the row's [tabindex=-1] wrapper after page nav, leaving a 2px black
   outline). Replace with a subtle terracotta ring. */
.forminator-ui .forminator-row:focus,
.forminator-ui .forminator-row:focus-visible,
.forminator-ui [tabindex="-1"]:focus,
.forminator-ui [tabindex="-1"]:focus-visible,
.forminator-ui .forminator-pagination:focus,
.forminator-ui .forminator-pagination[tabindex]:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

/* ── Validation messages ────────────────────────────────────────────────── */
.forminator-ui .forminator-error-message,
.forminator-ui .forminator-label-validation,
.forminator-ui .forminator-input--error,
.forminator-ui [class*="error"] {
    color: #B23A1F !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}
.forminator-ui .forminator-has_error input,
.forminator-ui .forminator-has_error select,
.forminator-ui .forminator-has_error textarea {
    border-color: #B23A1F !important;
}
/* LocaLeaf per-step validation (free-tier Forminator doesn't ship it) */
.forminator-ui .localeaf-step-error-field {
    position: relative !important;
}
.forminator-ui .localeaf-step-error-field .forminator-label {
    color: #B23A1F !important;
}
.forminator-ui .localeaf-step-error-field input,
.forminator-ui .localeaf-step-error-field select,
.forminator-ui .localeaf-step-error-field textarea,
.forminator-ui .localeaf-step-error-field .forminator-radio,
.forminator-ui .localeaf-step-error-field .forminator-checkbox {
    border-color: #B23A1F !important;
}
.forminator-ui .localeaf-step-error {
    color: #B23A1F !important;
    background: #FBEDE9 !important;
    border: 1px solid #B23A1F !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    margin-top: 8px !important;
    font-size: 13px !important;
    display: block !important;
}

/* ── Success / thank-you message ────────────────────────────────────────── */
/* Forminator hides the message by default (display:none until submission).
   The .forminator-success class is added on success — force it visible. */
.forminator-ui .forminator-response-message.forminator-success,
.forminator-ui .forminator-response-message[aria-live].forminator-success {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #EAF2DE !important;
    border: 1px solid var(--ll-accent-2) !important;
    color: var(--ll-contrast) !important;
    padding: 22px 26px !important;
    border-radius: 6px !important;
    font-family: var(--ll-font-display) !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
/* Default state (before submission): hide */
.forminator-ui .forminator-response-message:not(.forminator-success):not(.forminator-error) {
    display: none !important;
}

@media (max-width: 640px) {
    .forminator-ui.forminator-custom-form { padding: 20px 16px 24px !important; }
    .forminator-ui .forminator-pagination-footer { flex-direction: column-reverse !important; }
    .forminator-ui .forminator-pagination-footer > * { width: 100% !important; }

    /* Pagination on mobile — vertical stack: prefix above, then label. */
    .forminator-ui .forminator-pagination-steps,
    .forminator-ui [role="tablist"].forminator-pagination-steps {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow: hidden !important;
        padding: 4px 0 14px !important;
        margin-bottom: 16px !important;
        position: relative !important;
        border-bottom: 1px solid var(--ll-border-soft) !important;
    }
    /* Hide all non-current steps + connectors */
    .forminator-ui .forminator-pagination-steps .forminator-step:not(.forminator-current),
    .forminator-ui .forminator-pagination-steps .forminator-break {
        display: none !important;
    }
    /* "STEP N OF 5" prefix — readable, above the label */
    .forminator-ui .forminator-pagination-steps::before {
        content: attr(data-step-text);
        display: block !important;
        text-align: center !important;
        font-size: 14px !important;
        color: var(--ll-accent-1) !important;
        font-family: var(--ll-font-body) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 4px !important;
        order: -1 !important;
        line-height: 1.2 !important;
    }
    /* Current step label */
    .forminator-ui .forminator-pagination-steps .forminator-step.forminator-current {
        display: block !important;
        text-align: center !important;
        padding: 0 !important;
        font-weight: 600 !important;
        color: var(--ll-contrast) !important;
        background: transparent !important;
        border: 0 !important;
    }
    .forminator-ui .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-label {
        display: block !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        font-family: var(--ll-font-display) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        margin: 0 !important;
        color: var(--ll-contrast) !important;
    }
    .forminator-ui .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-dot {
        display: none !important;
    }
    /* Thin progress bar below the label */
    .forminator-ui .forminator-pagination-steps::after {
        content: '';
        display: block !important;
        width: 100% !important;
        height: 4px !important;
        background: linear-gradient(to right, var(--ll-accent-1) var(--ll-progress, 20%), var(--ll-border-soft) var(--ll-progress, 20%)) !important;
        border-radius: 999px !important;
        margin-top: 10px !important;
        order: 2 !important;
    }

    /* Mobile spacing — make sure there's no giant gap between last field
       and the buttons. The page container should size to content. */
    .forminator-ui .forminator-pagination,
    .forminator-ui .forminator-pagination--content,
    .forminator-ui .forminator-pages-wrapper {
        min-height: 0 !important;
        height: auto !important;
    }
    .forminator-ui .forminator-pagination-footer {
        margin-top: 8px !important;
        padding-top: 8px !important;
    }
}