/* Variant sheets — @imported here so the component loader, which enqueues
   only form.css for this folder, pulls them on the same request (widget
   convention; precedent: carousel.css, tooltip.css). Order: Fluent wrapper/
   layout first, then the field-level enhancement overlays. */
@import './fluent-forms-wrapper.css?ver=1787769613';
@import './fluent-forms-multistep.css?ver=1787769613';
@import './fluent-forms-file-upload.css?ver=1787769613';
@import './choices.css?ver=1787769613';
@import './flatpickr.css?ver=1787769613';
@import './format-validation.css?ver=1787769613';
@import './switch-toggle.css?ver=1787769613';
@import './textarea-resize.css?ver=1787769613';
@import './disabled-fields.css?ver=1787769613';
@import './ff-list-buttons.css?ver=1787769613';

/* ─── Forms (opt-in via .hzo-form wrapper) ──────────────────────
   Rules activate only inside a .hzo-form container. Targets two
   surfaces:

   1. Native HTML form elements (input/textarea/select) — also catches
      Fluent Forms' rendered output (Fluent Forms emits standard HTML
      inputs inside .ff-el-form-control wrappers; the .hzo-form wrapper
      style applies via tag-name match, no plugin-specific selectors
      required).
   2. Hozio Studio BEM classes (.hzo-form__label, .hzo-form__description,
      .hzo-form__option, .hzo-form__message--error/success,
      .hzo-form__input--error) — direct authoring + validation states.

   !important is retained on field-level rules so the styles win
   against equal-specificity plugin output (Fluent Forms, or any form
   plugin we swap to later) when source order isn't guaranteed. NOT
   carried into structural rules. */
.hzo-form { max-width: 640px; }

.hzo-form input[type="text"],
.hzo-form input[type="email"],
.hzo-form input[type="tel"],
.hzo-form input[type="number"],
.hzo-form input[type="url"],
.hzo-form input[type="password"],
.hzo-form input[type="date"],
.hzo-form textarea,
.hzo-form select {
    width: 100%;
    padding: var(--input-padding, 12px 16px) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    color: var(--text-body) !important;
    background: var(--input-bg, #fff) !important;
    border: 1px solid var(--input-border, var(--border)) !important;
    border-radius: var(--input-radius, var(--radius-input)) !important;
    line-height: var(--lh-normal);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.hzo-form input:focus,
.hzo-form textarea:focus,
.hzo-form select:focus {
    outline: none;
    border-color: var(--color-focus) !important;
    box-shadow: 0 0 0 2px var(--brand-pale) !important;
}

.hzo-form input::placeholder,
.hzo-form textarea::placeholder { color: var(--color-placeholder); }

/* Validation error state — opt-in modifier class. Applied to the input
   element itself (e.g. <input class="hzo-form__input--error">). */
.hzo-form .hzo-form__input--error,
.hzo-form input.hzo-form__input--error,
.hzo-form textarea.hzo-form__input--error,
.hzo-form select.hzo-form__input--error {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 2px var(--error-bg) !important;
}

/* G49: mirror the same red border + ring onto Fluent's live-validation hook.
   Fluent flags an invalid field's group with .ff-el-group.ff-el-is-error; the
   engine's own modifier never lands on plugin-rendered fields, so without this
   a Fluent form's client-side errors would show the plugin's default styling
   instead of ours. Checkboxes/radios keep their control box untouched. */
.hzo-form .ff-el-is-error input:not([type="checkbox"]):not([type="radio"]),
.hzo-form .ff-el-is-error textarea,
.hzo-form .ff-el-is-error select {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 2px var(--error-bg) !important;
}
.hzo-form .ff-el-is-error .text-danger,
.hzo-form .ff-el-is-error .error { color: var(--error) !important; }

/* PF-069 — `.is-loading` must always PAINT something. form.js's submit-lock puts
   the class on whatever the form's submit control is: `.ff-btn-submit` (Fluent —
   spinner recipe in choices.css), `.hzo-btn`/`.hzo-button` (buttons.css spinner),
   or, in a hand-authored .hzo-form, a bare <button type="submit"> that matches
   NEITHER — which rendered nothing at all: the class hid no label, painted no
   spinner, and left an inert-looking button as the only feedback. Cover the
   remainder here. Own keyframe because spinner.css is gated and may be absent on
   a form-only page (same reason choices.css declares its own). */
@keyframes hzo-form-submit-spin { to { transform: rotate(360deg); } }
.hzo-form button[type="submit"].is-loading:not(.hzo-btn):not(.hzo-button):not(.ff-btn-submit) {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}
.hzo-form button[type="submit"].is-loading:not(.hzo-btn):not(.hzo-button):not(.ff-btn-submit)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    /* NOT currentColor — the rule above sets the element's own color to
       transparent to hide the label, and a pseudo-element inherits it, so
       currentColor would paint an invisible spinner. Same reason choices.css
       names the token explicitly. */
    border: 2px solid color-mix(in srgb, var(--btn-primary-text, var(--text-on-accent)) 30%, transparent);
    border-top-color: var(--btn-primary-text, var(--text-on-accent));
    animation: hzo-form-submit-spin 0.6s linear infinite;
}
/* <input type="submit"> has no ::after to spin — a dim + progress cursor is the
   only in-element cue the element type can carry. */
.hzo-form input[type="submit"].is-loading {
    opacity: 0.6;
    cursor: progress;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .hzo-form button[type="submit"].is-loading:not(.hzo-btn):not(.hzo-button):not(.ff-btn-submit)::after {
        animation-duration: 1.5s;
    }
}

/* Select dropdown: hide native arrow, paint a custom chevron (Hozio-style).
   Uses the `background` shorthand to override the .hzo-form input/select
   rule above (which also uses the shorthand with !important).
   Stroke color #1F2937 matches --text-heading for stronger contrast. */
.hzo-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px !important;
    background: var(--input-bg, #fff) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 16px center / 16px 16px !important;
    cursor: pointer;
}

/* Field labels — BEM class (direct authoring). Matches the Fluent
   .ff-el-input--label label rule below so direct-authored and plugin-
   rendered forms look identical. */
.hzo-form .hzo-form__label {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--fw-600);
    line-height: 1.4;
    color: var(--text-body);
    margin-bottom: 6px;
}

/* Field descriptions — BEM class. */
.hzo-form .hzo-form__description {
    font-size: 15px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Validation messages — BEM modifier classes (rendered by the form handler
   or hand-placed). */
.hzo-form .hzo-form__message--error   { color: var(--error); }
.hzo-form .hzo-form__message--success { color: var(--success); }

/* Radio/checkbox option row layout — BEM class. */
.hzo-form .hzo-form__option {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.4;
    padding: 6px 0;
    cursor: pointer;
}

/* Custom-styled checkboxes and radios.
   Hozio-style: 20px square/round, border --border, filled --brand when checked
   with white check/dot indicator. !important kept on appearance/visual
   properties because browser-default rendering + plugin form output may
   apply equal-specificity styling that source order does not guarantee
   defeating. */
.hzo-form input[type="checkbox"],
.hzo-form input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin-right: 10px !important;
    border: 1.5px solid var(--border) !important;
    background: #fff !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
}
.hzo-form input[type="checkbox"] { border-radius: 4px !important; }
.hzo-form input[type="radio"]    { border-radius: 50% !important; }

.hzo-form input[type="checkbox"]:hover,
.hzo-form input[type="radio"]:hover {
    border-color: var(--color-focus) !important;
}

.hzo-form input[type="checkbox"]:focus-visible,
.hzo-form input[type="radio"]:focus-visible {
    outline: none !important;
    border-color: var(--color-focus) !important;
    box-shadow: 0 0 0 3px var(--brand-pale) !important;
}

.hzo-form input[type="checkbox"]:checked,
.hzo-form input[type="radio"]:checked {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* Checkmark for checked checkbox */
.hzo-form input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Dot for selected radio */
.hzo-form input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}