/**
 * Malla theme for form.io 4.x — overrides the bundled Bootstrap-5
 * styling with a lighter, card-based look closer to Tally/Linear.
 *
 * Loaded AFTER formio.full.min.css so every rule below wins on
 * specificity by sitting under `.formio-scope` (the wrapper both the
 * admin builder view and the public form view use). Nothing here
 * leaks outside that wrapper.
 *
 * Color tokens used throughout:
 *   --m-bg          background canvas
 *   --m-card        cards / panels / chip surfaces
 *   --m-border      neutral border
 *   --m-border-hov  border on hover
 *   --m-text        primary text
 *   --m-text-muted  secondary text
 *   --m-accent      focus + active state
 *   --m-accent-bg   subtle tint of the accent for hover backgrounds
 *   --m-danger      required asterisk + delete action
 *   --m-shadow      resting shadow on cards
 *   --m-shadow-hov  hover shadow
 *
 * If you want to retheme (e.g. dark mode), override these tokens
 * inside a parent selector — the rest cascades.
 */
.formio-scope {
    --m-bg:          #f9fafb;
    --m-card:        #ffffff;
    --m-border:      #e5e7eb;
    --m-border-hov:  #d1d5db;
    --m-text:        #111827;
    --m-text-muted:  #6b7280;
    --m-accent:      #2563eb;
    --m-accent-bg:   #eff6ff;
    --m-danger:      #ef4444;
    --m-shadow:      0 1px 2px rgba(0, 0, 0, 0.04);
    --m-shadow-hov:  0 4px 14px rgba(0, 0, 0, 0.08);
    --m-radius:      8px;
    --m-radius-sm:   6px;
}

/* =================================================================
 * 0. Sidebar palette: drop the accordion, always show all groups.
 *
 * form.io's builder rail uses Bootstrap accordion conventions
 * (`.collapse.show` toggling) that need Bootstrap 4/5's JS to wire
 * up. Malla's admin ships Bootstrap 3 jQuery, so the click events
 * either do nothing or get toggled by mismatched classes (`in` vs
 * `show`), leaving the chips half-collapsed and overlapping the
 * next group.
 *
 * Rather than fight two Bootstrap versions, force every group OPEN
 * permanently. The result is a single scrollable rail with section
 * dividers — more discoverable than an accordion anyway for the
 * 30-ish field types we expose. Wraps stay inside .formio-scope so
 * legit BS3 .collapse elements elsewhere in the admin are untouched.
 *
 * Dialog tabs / nested wizard panels keep their own collapse logic
 * (form.io drives those programmatically), so the override is
 * narrowed to the SIDEBAR via .form-builder-panel ancestry.
 * ================================================================= */
.formio-scope .form-builder-panel .collapse,
.formio-scope .form-builder-panel .collapse:not(.show) {
    display: block !important;
    height: auto !important;
}
.formio-scope .form-builder-panel .collapsing {
    display: block !important;
    height: auto !important;
    transition: none !important;
}
/* Hide the click-target affordance — the header is now a static
   section label, not a button. The chevron we added in our chip
   block stays as a visual but doesn't rotate (no expand/collapse). */
.formio-scope .form-builder-panel .builder-group-button {
    cursor: default;
    pointer-events: none;  /* clicks become no-ops, no "broken" feeling */
}
.formio-scope .form-builder-panel .builder-group-button::before {
    content: none;
}

/* For OTHER .collapse usages (dialog panels, wizard pages),
   keep the Bootstrap 4/5 semantics so they keep working. */
.formio-scope .formio-dialog .collapse:not(.show) { display: none; }
.formio-scope .formio-dialog .collapse.show       { display: block; }

/* =================================================================
 * 1. Builder layout — split panes with breathing room
 * ================================================================= */
.formio-scope .formio.builder.formbuilder {
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.formio-scope .formcomponents {
    background: var(--m-bg);
    border-right: 1px solid var(--m-border);
    padding: 16px 12px;
}

.formio-scope .formarea {
    background: var(--m-card);
    padding: 24px;
    min-height: 480px;
}

/* =================================================================
 * 2. Sidebar — search + group accordions + chips
 * ================================================================= */
.formio-scope .builder-sidebar_search {
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 12px;
    box-shadow: var(--m-shadow);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.formio-scope .builder-sidebar_search:focus {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 3px var(--m-accent-bg);
    outline: 0;
}

/* Each group panel — flatten the Bootstrap card chrome and give it a
   clean section-divider look. */
.formio-scope .form-builder-panel,
.formio-scope .card.form-builder-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin-bottom: 4px;
}
.formio-scope .form-builder-group-header,
.formio-scope .card-header.form-builder-group-header {
    background: transparent;
    border: 0;
    padding: 8px 4px 4px;
}

/* Group toggle button — strip the .btn dark cascade from Malla
   admin theme; replace with a small, tracked, uppercase label. */
.formio-scope .builder-group-button,
.formio-scope .btn.builder-group-button,
.formio-scope .btn-block.builder-group-button {
    background: transparent !important;
    color: var(--m-text-muted) !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 2px;
    width: 100%;
    cursor: pointer;
    transition: color 120ms ease;
}
.formio-scope .builder-group-button:hover {
    color: var(--m-text) !important;
}

/* The chips — this is the big visual fix. Replace btn-primary navy
   with a light card that has a leading icon, hover lift, grab cursor.
   `!important` defeats Malla's global btn-primary cascade. */
.formio-scope .formcomponent.drag-copy,
.formio-scope .btn.formcomponent,
.formio-scope .btn-primary.formcomponent {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--m-card) !important;
    color: var(--m-text) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: var(--m-shadow);
    cursor: grab;
    margin-bottom: 4px;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.formio-scope .formcomponent.drag-copy:hover,
.formio-scope .btn-primary.formcomponent:hover {
    border-color: var(--m-border-hov) !important;
    transform: translateY(-1px);
    box-shadow: var(--m-shadow-hov);
}
.formio-scope .formcomponent.drag-copy:active,
.formio-scope .btn-primary.formcomponent:active {
    cursor: grabbing;
    transform: translateY(0);
}
.formio-scope .formcomponent .fa,
.formio-scope .formcomponent .fas,
.formio-scope .formcomponent .far,
.formio-scope .formcomponent .fa-solid,
.formio-scope .formcomponent .fa-regular {
    color: var(--m-text-muted);
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* The chevron / collapse indicator next to each group title */
.formio-scope .builder-group-button[aria-expanded="true"]::before,
.formio-scope .builder-group-button[aria-expanded="false"]::before {
    content: "›";
    display: inline-block;
    margin-right: 6px;
    transition: transform 120ms ease;
    font-weight: 700;
    color: var(--m-text-muted);
}
.formio-scope .builder-group-button[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

/* =================================================================
 * 3. Canvas — placed components inside the form preview
 * ================================================================= */

/* The dotted "drop here" outline that appears when the form is empty
   or while dragging. */
.formio-scope .formarea .drag-and-drop-alert {
    border: 2px dashed var(--m-border);
    border-radius: var(--m-radius);
    padding: 32px;
    text-align: center;
    color: var(--m-text-muted);
    background: var(--m-bg);
}

/* Each placed component — wrap it in a soft card so it visually
   separates from its neighbours and the user understands "this is
   one editable block". */
.formio-scope .formarea .formio-component:not(.formio-component-form):not(.component-btn-group) {
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.formio-scope .formarea .formio-component:hover {
    border-color: var(--m-border-hov);
    box-shadow: var(--m-shadow);
}

/* Action toolbar that hovers above each placed component (settings,
   move, copy, delete). ALWAYS VISIBLE — earlier hide-until-hover
   behaviour confused users into thinking the field wasn't editable.
   We keep the toolbar light so it doesn't compete with the field
   content but it's always there to discover.

   We have to fight form.io's own
       .builder-component:not(:hover) .component-btn-group { display: none }
   rule from its base CSS — the `!important` here is intentional, not
   defensive, since the upstream rule has the same specificity. */
.formio-scope .component-btn-group {
    display: flex !important;
    flex-direction: row-reverse;
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: 0 var(--m-radius-sm) 0 var(--m-radius-sm);
    padding: 2px;
    z-index: 2;
}
.formio-scope .builder-component:not(:hover) .component-btn-group {
    display: flex !important;  /* override form.io's hide-on-not-hover */
}
.formio-scope .component-btn-group .btn {
    background: transparent !important;
    color: var(--m-text-muted) !important;
    border: 0 !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    transition: background 120ms ease, color 120ms ease;
}
.formio-scope .component-btn-group .btn:hover {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
}
.formio-scope .component-btn-group .component-settings-button-remove:hover,
.formio-scope .component-btn-group [ref="removeComponent"]:hover {
    background: #fee2e2 !important;
    color: var(--m-danger) !important;
}
/* When the cursor enters a placed-component card, give the toolbar a
   subtle accent border so the user knows that card is the focus
   target for the buttons. */
.formio-scope .formarea .formio-component:hover > .component-btn-group {
    border-color: var(--m-border-hov);
}

/* =================================================================
 * 4. Form fields — what the visitor will actually see
 *    (also affects the preview inside the builder and the public form)
 * ================================================================= */
.formio-scope .formio-component .col-form-label,
.formio-scope label.control-label,
.formio-scope .formio-component label.col-form-label {
    color: var(--m-text);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 6px;
}

/* Required asterisk */
.formio-scope .field-required:after,
.formio-scope label.field-required:after {
    color: var(--m-danger);
    margin-left: 4px;
}

/* Inputs / textareas / selects */
.formio-scope .form-control,
.formio-scope .formio-component input.form-control,
.formio-scope .formio-component textarea.form-control,
.formio-scope .formio-component select.form-control {
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--m-text);
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    min-height: 42px;
}
.formio-scope .form-control:hover {
    border-color: var(--m-border-hov);
}
.formio-scope .form-control:focus {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 3px var(--m-accent-bg);
    outline: 0;
}
.formio-scope textarea.form-control {
    min-height: 96px;
}

/* Checkbox / radio chrome — bigger hit area, accent color */
.formio-scope .form-check-input {
    accent-color: var(--m-accent);
    width: 16px;
    height: 16px;
    margin-top: 4px;
}
.formio-scope .form-check-label {
    padding-left: 4px;
    color: var(--m-text);
    font-size: 14px;
}

/* Submit / primary buttons (visitor-facing) — solid accent with hover */
.formio-scope .btn-primary {
    background: var(--m-accent);
    border-color: var(--m-accent);
    color: #ffffff;
    border-radius: var(--m-radius-sm);
    padding: 10px 18px;
    font-weight: 500;
    font-size: 14px;
    box-shadow: var(--m-shadow);
    transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.formio-scope .btn-primary:hover,
.formio-scope .btn-primary:focus {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: var(--m-shadow-hov);
    transform: translateY(-1px);
}
.formio-scope .btn-primary:active {
    transform: translateY(0);
}

/* Help / description text */
.formio-scope .formio-component .form-text,
.formio-scope .formio-component .help-block {
    color: var(--m-text-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* Validation errors */
.formio-scope .formio-errors .error,
.formio-scope .has-error .help-block {
    color: var(--m-danger);
    font-size: 12px;
    margin-top: 4px;
}
.formio-scope .formio-component.has-error .form-control,
.formio-scope .formio-component.formio-error-wrapper .form-control {
    border-color: var(--m-danger);
}

/* =================================================================
 * 5. Wizard navigation — used by the public renderer when the
 *    schema is transformed to display:'wizard' (one-question-at-a-time)
 *
 * Goal: a Typeform-ish experience. Hide form.io's busy breadcrumb
 * "tabs" row and replace it with a slim progress bar that scales with
 * the current page. The question heading + input live in the page
 * body, and the nav buttons sit cleanly at the bottom.
 * ================================================================= */

/* Hide the noisy breadcrumb-style page tabs that form.io renders by
   default — they show every page title as a clickable button and the
   user is meant to jump around. For our linear lead-capture flow that
   distracts more than it helps. The progress bar below conveys the
   same "where am I" without the chrome. */
.formio-scope .pagination {
    display: none;
}

/* Slim progress bar — drawn as a thin track at the top of the wizard
   panel, with the inner fill scaling via a CSS custom property the
   JS sets each time the page changes (see web_to_lead.php). */
.formio-scope .malla-wizard-progress {
    height: 4px;
    background: var(--m-border);
    border-radius: 999px;
    margin: 0 0 28px;
    overflow: hidden;
}
.formio-scope .malla-wizard-progress > span {
    display: block;
    height: 100%;
    background: var(--m-accent);
    border-radius: 999px;
    width: var(--malla-progress, 0%);
    transition: width 240ms ease;
}
.formio-scope .malla-wizard-progress-label {
    font-size: 12px;
    color: var(--m-text-muted);
    margin: -16px 0 24px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* The cover headline we re-render at the top of the first page */
.formio-scope .malla-wizard-cover {
    margin-bottom: 20px;
}
.formio-scope .malla-wizard-cover h1,
.formio-scope .malla-wizard-cover h2,
.formio-scope .malla-wizard-cover h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    color: var(--m-text);
}

/* The big question heading we inject as the body of each wizard page */
.formio-scope .malla-wizard-question {
    margin: 0 0 14px;
}
.formio-scope .malla-wizard-question h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--m-text);
    line-height: 1.4;
}
.formio-scope .malla-wizard-question .malla-req {
    color: var(--m-danger);
    margin-left: 2px;
}

/* When a field has hideLabel:true (wizard pages — the question already
   lives in the heading above), form.io still renders a floating required
   asterisk next to the input. Hide it — the asterisk in the heading is
   the single source of truth. */
.formio-scope .formio-component.formio-component-label-hidden > .field-required:after,
.formio-scope .formio-component.formio-component-label-hidden > label.field-required:after,
.formio-scope .formio-component.formio-component-label-hidden > .col-form-label.field-required:after {
    content: none;
}
.formio-scope .formio-component.formio-component-label-hidden > label.field-required {
    display: none;
}

/* Wizard page panel chrome — strip Bootstrap's card border so the
   page body sits inside our outer .formio-scope card with nothing
   competing for attention. */
.formio-scope .wizard-page > .card,
.formio-scope .formio-component-panel.wizard-page,
.formio-scope .formio-component-panel.wizard-page > .card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
.formio-scope .wizard-page .card-body,
.formio-scope .formio-component-panel.wizard-page .card-body {
    padding: 0;
}
.formio-scope .wizard-page .card-header,
.formio-scope .formio-component-panel.wizard-page .card-header {
    display: none;  /* page title also lives in the breadcrumb tabs (hidden) */
}

/* Nav buttons — Cancel / Previous / Next / Submit. Sit at the bottom
   with comfortable spacing; we style Cancel/Previous as ghost buttons
   so they don't fight for attention with the primary action. */
.formio-scope .formio-wizard-nav-container,
.formio-scope ul.list-inline.wizard-nav {
    margin-top: 28px;
    padding: 18px 0 0;
    border-top: 1px solid var(--m-border);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    list-style: none;
    align-items: center;
}
.formio-scope .formio-wizard-nav-container > *,
.formio-scope ul.list-inline.wizard-nav > * {
    flex: 0 1 auto;
}
/* Group the Previous + Next/Submit pair on the RIGHT so the visitor's
   primary motion (forward) is anchored to the dominant side, with
   Cancel staying isolated on the left as a low-attention escape hatch.
   The auto margin pre-empts `justify-content: space-between` for the
   item it's applied to. On pages without a Previous button (page 1, or
   when the schema omits Cancel), the 2-item space-between layout
   already lands Cancel/Submit on opposite ends correctly. */
.formio-scope .formio-wizard-nav-container > li:has(.btn-wizard-nav-previous),
.formio-scope ul.list-inline.wizard-nav > li:has(.btn-wizard-nav-previous) {
    margin-left: auto;
}
/* Wizard nav button refs are namespaced (`wizard-<hash>-next` etc.) so
   we match by stable class name instead of [ref="next"]. */
.formio-scope .btn-wizard-nav-cancel,
.formio-scope .btn-wizard-nav-previous,
.formio-scope ul.wizard-nav .btn-secondary,
.formio-scope ul.wizard-nav .btn-default {
    background: transparent !important;
    color: var(--m-text-muted) !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: none !important;
}
.formio-scope .btn-wizard-nav-cancel:hover,
.formio-scope .btn-wizard-nav-previous:hover {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
    border-color: var(--m-border-hov) !important;
}
/* Next uses the theme accent. Final submit picks up the user-
   configured colour (handled inline in web_to_lead.php). */
.formio-scope .btn-wizard-nav-next {
    background: var(--m-accent) !important;
    border-color: var(--m-accent) !important;
    color: #fff !important;
}
.formio-scope .btn-wizard-nav-next:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* Radio / checkbox option rendering.
 *
 * Two collisions get fixed here:
 *
 * 1. Perfex's tailwind base ships `.checkbox input[type=checkbox]`
 *    and `.radio input[type=radio]` with `opacity:0` because Perfex's
 *    own form pattern hides the native input and draws a fake circle
 *    via an ADJACENT `<label>` (`input + label::before/after`). Form.io
 *    however nests the input INSIDE the label (`<label><input><span>`),
 *    so the adjacent-sibling selectors never match — Perfex's visual
 *    cue never appears, and the native radio is invisible too. Result:
 *    a row of label text with no clickable indicator. We restore the
 *    native radio (opacity, position, sensible margin) so the user
 *    actually sees what they're picking.
 *
 * 2. Form.io's own rule
 *      .formio-component-radio.formio-component-label-hidden.required
 *      .form-check-label:before { content: "* " }
 *    is intended as a "this is required" badge when the field label is
 *    hidden — but our wizard already renders the question as an <h3>
 *    with `<span class="malla-req">*</span>` on required fields, so the
 *    per-option asterisk is duplicate noise. Suppress it.
 *
 * Both selectors are scoped under `.formio-scope` so we don't touch
 * Perfex's native radio/checkbox styling elsewhere in the admin. */
.formio-scope .radio input[type=radio],
.formio-scope .checkbox input[type=checkbox],
.formio-scope .form-check input[type=radio],
.formio-scope .form-check input[type=checkbox] {
    opacity: 1 !important;
    position: static !important;
    margin: 0 8px 0 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--m-accent);
    vertical-align: middle;
    cursor: pointer;
}
/* Two pseudo-elements fight us here for radio/checkbox options:
 *
 *   a) Perfex's tailwind base ships `.form-check-label::before` with a
 *      bordered white circle/box meant as a fake control marker. Since
 *      we restored native input visibility above, this leaves TWO
 *      markers per option (the empty fake one PLUS the real native
 *      input). Suppress the fake one.
 *
 *   b) Form.io's own stock rule
 *        .formio-component-radio.formio-component-label-hidden.required
 *        .form-check-label::before { content: "* " }
 *      injects a red "* " badge as a required cue when the field label
 *      is hidden. Our wizard already shows required state on the
 *      question heading, so suppress the duplicate.
 *
 * Killing the `::before` entirely on every `.form-check-label` inside
 * `.formio-scope` covers both cases in one rule. */
.formio-scope .form-check-label::before,
.formio-scope .form-check-label:before {
    content: none !important;
    display: none !important;
}

/* =================================================================
 * 6. Public form polish — modern card, generous spacing, soft motion
 *
 * Applied on body.web-to-lead so it only paints the visitor-facing
 * form, not the admin builder preview. Goal: a 2024-feeling card —
 * generous padding, soft shadow that grows on hover, larger typography
 * on the cover heading, and bigger tap targets on the wizard nav.
 * ================================================================= */
body.web-to-lead {
    /* Subtle background gradient so the card has something to float on
       instead of a flat #f9fafb. Performance is fine — single linear. */
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%) !important;
    min-height: 100vh;
}
body.web-to-lead .formio-scope {
    max-width: 720px;
    margin: 56px auto 96px;
    padding: 40px 44px;
    background: var(--m-card);
    border: 1px solid #e7e9ec;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 32px rgba(15, 23, 42, 0.06);
    transition: box-shadow 240ms ease;
}
body.web-to-lead .formio-scope:hover {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 14px 48px rgba(15, 23, 42, 0.10);
}
body.web-to-lead .formio-scope .formio-component {
    margin-bottom: 18px;
}
body.web-to-lead .formio-scope .malla-wizard-cover h1,
body.web-to-lead .formio-scope .formio-component-htmlelement h1 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--m-text);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
body.web-to-lead .formio-scope .formio-component-htmlelement h2 { font-size: 22px; font-weight: 600; }
body.web-to-lead .formio-scope .formio-component-htmlelement h3 { font-size: 19px; font-weight: 600; }
body.web-to-lead .formio-scope .formio-component-content p {
    color: var(--m-text-muted);
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.55;
}

/* Question heading on each wizard page — slightly larger so it feels
   like a real question, not a tiny label. */
body.web-to-lead .formio-scope .malla-wizard-question h3 {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--m-text);
}

/* Inputs: bigger tap target, softer corners, friendlier focus ring */
body.web-to-lead .formio-scope .form-control {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
    border-color: #e2e5e9;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
body.web-to-lead .formio-scope .form-control:hover {
    background: #fcfcfd;
    border-color: #cdd1d7;
}
body.web-to-lead .formio-scope .form-control:focus {
    background: var(--m-card);
    border-color: var(--m-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
body.web-to-lead .formio-scope textarea.form-control {
    min-height: 120px;
    line-height: 1.5;
}

/* Buttons: bigger, modern radius */
body.web-to-lead .formio-scope .btn {
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    min-height: 46px;
}
body.web-to-lead .formio-scope .btn-wizard-nav-cancel,
body.web-to-lead .formio-scope .btn-wizard-nav-previous {
    padding: 12px 18px;
}

/* Radio + Checkbox: larger hit targets, hover background */
body.web-to-lead .formio-scope .form-check {
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 120ms ease;
    margin-bottom: 4px;
}
body.web-to-lead .formio-scope .form-check:hover {
    background: #f8fafc;
}
body.web-to-lead .formio-scope .form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}
body.web-to-lead .formio-scope .form-check-label {
    font-size: 15px;
    color: var(--m-text);
    cursor: pointer;
}

/* Progress bar: slightly more present, soft animated shine */
body.web-to-lead .formio-scope .malla-wizard-progress {
    height: 6px;
    margin-bottom: 32px;
}
body.web-to-lead .formio-scope .malla-wizard-progress-label {
    margin: -22px 0 28px;
    font-size: 13px;
    color: var(--m-text-muted);
    font-weight: 500;
}

/* Page transition: subtle fade-in on the active wizard page */
@keyframes mallaFormPageIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.web-to-lead .formio-scope .formio-component-panel.wizard-page {
    animation: mallaFormPageIn 240ms ease;
}

/* Mobile breakpoint — pull padding back so the card uses the screen */
@media (max-width: 640px) {
    body.web-to-lead .formio-scope {
        margin: 16px;
        padding: 24px 20px;
        border-radius: 12px;
    }
    body.web-to-lead .formio-scope .malla-wizard-cover h1,
    body.web-to-lead .formio-scope .formio-component-htmlelement h1 { font-size: 22px; }
}

/* =================================================================
 * 7. Field-edit dialog modernization
 *
 * The admin builder pops up a `.formio-dialog` when the user clicks
 * the gear icon on a component in the canvas. Out of the box it ships
 * with form.io's bootstrap-3-era styling (cramped, default tabs,
 * generic buttons) which feels markedly older than the public form.
 * We wrap the dialog in `.formio-scope.formio-dialog-scope-wrap` via
 * the MutationObserver in formbuilder.php so these rules can target
 * it through the scoped selector.
 *
 * Goal: same calm, breathing 2024-feeling card as the public form —
 * generous padding, modern tab indicator, focus rings, soft shadows,
 * primary/ghost button hierarchy. The Preview pane on the right of
 * the dialog renders a real form.io component, so the modern field
 * styles defined for the public form already polish it once we wrap
 * the dialog under .formio-scope.
 * ================================================================= */
.formio-scope .formio-dialog .formio-dialog-content {
    background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid var(--m-border) !important;
    box-shadow:
        0 12px 28px -8px rgba(15, 23, 42, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.06) !important;
    padding: 28px 32px !important;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    color: var(--m-text) !important;
}
/* Title row — make the component name prominent + give the close
   button a circular hit target on the right. */
.formio-scope .formio-dialog .formio-dialog-content > div:first-child h4,
.formio-scope .formio-dialog .formio-dialog-content > div:first-child h5,
.formio-scope .formio-dialog .formio-dialog-content > div:first-child h6,
.formio-scope .formio-dialog .formio-dialog-content > h4,
.formio-scope .formio-dialog .formio-dialog-content > h5,
.formio-scope .formio-dialog .formio-dialog-content > h6 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--m-text) !important;
    margin: 0 0 24px !important;
    letter-spacing: -0.01em !important;
}
.formio-scope .formio-dialog .formio-dialog-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--m-bg) !important;
    color: var(--m-text-muted) !important;
    border: 1px solid var(--m-border) !important;
    line-height: 28px !important;
    text-align: center !important;
    font-size: 16px !important;
    opacity: 1 !important;
    text-shadow: none !important;
    transition: all 160ms ease;
}
.formio-scope .formio-dialog .formio-dialog-close:hover {
    background: var(--m-border) !important;
    color: var(--m-text) !important;
}
/* Tabs — drop the card-header background, add an underline-style
   active indicator in the accent colour. Hover gives a subtle hint. */
.formio-scope .formio-dialog .nav-tabs,
.formio-scope .formio-dialog .card-header-tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--m-border) !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    display: flex;
    gap: 4px;
}
.formio-scope .formio-dialog .nav-tabs .nav-link,
.formio-scope .formio-dialog .card-header-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--m-text-muted) !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    margin-bottom: -1px !important;
    transition: color 160ms ease, border-color 160ms ease;
}
.formio-scope .formio-dialog .nav-tabs .nav-link:hover,
.formio-scope .formio-dialog .card-header-tabs .nav-link:hover {
    color: var(--m-text) !important;
    border-bottom-color: var(--m-border-hov) !important;
}
.formio-scope .formio-dialog .nav-tabs .nav-link.active,
.formio-scope .formio-dialog .card-header-tabs .nav-link.active {
    color: var(--m-accent) !important;
    border-bottom-color: var(--m-accent) !important;
    background: transparent !important;
}
/* Form inputs inside the dialog — match the public form styling
   (taller fields, rounded corners, focus ring). Excludes the JSON
   editor textarea and Ace editor so we don't fight monospace UIs. */
.formio-scope .formio-dialog .formio-dialog-content input.form-control,
.formio-scope .formio-dialog .formio-dialog-content textarea.form-control:not(.ace_text-input),
.formio-scope .formio-dialog .formio-dialog-content .choices__inner,
.formio-scope .formio-dialog .formio-dialog-content select.form-control {
    border-radius: 10px !important;
    border: 1px solid var(--m-border) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    background-color: #fff !important;
    color: var(--m-text) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.formio-scope .formio-dialog .formio-dialog-content input.form-control:focus,
.formio-scope .formio-dialog .formio-dialog-content textarea.form-control:focus,
.formio-scope .formio-dialog .formio-dialog-content .choices__inner:focus-within,
.formio-scope .formio-dialog .formio-dialog-content select.form-control:focus {
    outline: none !important;
    border-color: var(--m-accent) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}
/* Field labels in the dialog — slightly smaller, muted, uppercase
   feel without going full caps. */
.formio-scope .formio-dialog .formio-dialog-content .control-label,
.formio-scope .formio-dialog .formio-dialog-content label.col-form-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--m-text) !important;
    margin: 16px 0 6px !important;
}
.formio-scope .formio-dialog .formio-dialog-content .control-label .text-muted {
    font-weight: 400 !important;
    color: var(--m-text-muted) !important;
}
/* Save / Cancel / Remove button row — primary action gets the accent,
   Cancel becomes a ghost button, Remove keeps danger semantics but
   moves to the right with auto margin so it's harder to misclick. */
.formio-scope .formio-dialog .formio-dialog-content > .btn,
.formio-scope .formio-dialog .formio-dialog-content button.btn-success,
.formio-scope .formio-dialog .formio-dialog-content button.btn-primary {
    background: var(--m-accent) !important;
    border-color: var(--m-accent) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    transition: background 160ms ease, transform 80ms ease;
}
.formio-scope .formio-dialog .formio-dialog-content button.btn-success:hover,
.formio-scope .formio-dialog .formio-dialog-content button.btn-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}
.formio-scope .formio-dialog .formio-dialog-content button.btn-default,
.formio-scope .formio-dialog .formio-dialog-content button.btn-secondary {
    background: transparent !important;
    color: var(--m-text-muted) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.formio-scope .formio-dialog .formio-dialog-content button.btn-default:hover,
.formio-scope .formio-dialog .formio-dialog-content button.btn-secondary:hover {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
    border-color: var(--m-border-hov) !important;
}
.formio-scope .formio-dialog .formio-dialog-content button.btn-danger {
    background: transparent !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    box-shadow: none !important;
    margin-left: auto !important;
}
.formio-scope .formio-dialog .formio-dialog-content button.btn-danger:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
}
/* Help link at the top of the right column — its icon character
   wasn't loading, leaving a broken-image glyph. Hide the icon and
   keep the text. */
.formio-scope .formio-dialog .formio-dialog-content a[href*="help"] i,
.formio-scope .formio-dialog .formio-dialog-content .formio-help i {
    display: none !important;
}
/* Preview pane styling — card it just like the public form so the
   visitor's experience is what the admin sees while editing. */
.formio-scope .formio-dialog .formio-dialog-content .preview,
.formio-scope .formio-dialog .formio-dialog-content [ref="preview"] {
    background: #f9fafb !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 0 !important;
}
.formio-scope .formio-dialog .formio-dialog-content .preview > h5,
.formio-scope .formio-dialog .formio-dialog-content .preview > div > h5,
.formio-scope .formio-dialog .formio-dialog-content [ref="preview"] > h5 {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--m-text-muted) !important;
    margin: 0 0 12px !important;
    font-weight: 600 !important;
}
/* Help / tooltip icons inline with labels — make them subtle and
   on-brand colored on hover. */
.formio-scope .formio-dialog .formio-dialog-content .control-label .fa-question-circle,
.formio-scope .formio-dialog .formio-dialog-content .control-label i {
    color: var(--m-text-muted) !important;
    margin-left: 4px;
    opacity: 0.6;
    transition: opacity 160ms ease, color 160ms ease;
}
.formio-scope .formio-dialog .formio-dialog-content .control-label:hover .fa-question-circle,
.formio-scope .formio-dialog .formio-dialog-content .control-label:hover i {
    color: var(--m-accent) !important;
    opacity: 1;
}
/* Backdrop — slightly more muted than the default near-black, plays
   nicer with the card's soft shadow. */
.formio-scope .formio-dialog .formio-dialog-overlay,
.formio-dialog-overlay {
    background: rgba(15, 23, 42, 0.48) !important;
}