/*
 * LocaLeaf — Fluent Forms brand overrides
 *
 * Applies parchment background, terracotta accent, typewriter headings, and
 * usable focus / hover / click states to Fluent Forms in BOTH conversational
 * mode (the /market/ + /marche/ surveys) and standard single/multi-step mode.
 */

/* ── Brand vars ─────────────────────────────────────────────────────────── */
.fluentform,
.ff-conv-form-wrapper,
.ffc_form_wrapper,
[class*="ff_conv_app"] {
    --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);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STANDARD FORM MODE (single + multi-step)
   ═══════════════════════════════════════════════════════════════════════════ */

.fluentform {
    background: var(--ll-base);
    border: 1px solid var(--ll-border-soft);
    border-radius: 6px;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px) clamp(28px, 4vw, 48px);
    box-shadow: var(--ll-shadow);
    font-family: var(--ll-font-body);
    color: var(--ll-contrast);
    max-width: 760px;
    margin-inline: auto;
}

/* Step header / titles */
.fluentform .ff-step-header { margin-bottom: 28px; }

.fluentform .ff-step-titles {
    display: flex;
    gap: 8px;
    padding: 0 0 18px;
    margin: 0 0 18px;
    list-style: none;
    counter-reset: ll-step;
    border-bottom: 1px solid var(--ll-border-soft);
    overflow-x: auto;
    scrollbar-width: thin;
}
.fluentform .ff-step-titles li {
    flex: 1 1 0;
    min-width: 110px;
    text-align: center;
    padding: 6px 4px;
    font-family: var(--ll-font-display);
    font-size: 14px;
    line-height: 1.25;
    color: var(--ll-accent-4);
    counter-increment: ll-step;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
}
.fluentform .ff-step-titles li::before {
    content: counter(ll-step);
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ll-border-soft);
    color: var(--ll-accent-4);
    font-size: 12px; font-weight: 600;
    font-family: var(--ll-font-body);
    vertical-align: middle;
    transition: background .2s, color .2s;
}
.fluentform .ff-step-titles li.ff_step_complete::before,
.fluentform .ff-step-titles li.ff_active::before,
.fluentform .ff-step-titles li.active::before {
    background: var(--ll-accent-1);
    color: #FFFFFF;
}
.fluentform .ff-step-titles li.ff_active,
.fluentform .ff-step-titles li.active {
    color: var(--ll-contrast);
    border-bottom-color: var(--ll-accent-1);
}

/* Progress bar */
.fluentform .ff-el-progress {
    background: var(--ll-border-soft);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 6px 0 12px;
}
.fluentform .ff-el-progress-bar {
    background: var(--ll-accent-1) !important;
    border-radius: 999px;
    transition: width .35s ease;
}

/* Labels */
.fluentform .ff-el-input--label > label {
    font-family: var(--ll-font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--ll-contrast);
    margin-bottom: 10px;
    display: block;
}
.fluentform .ff-el-input--label .ff-el-is-required { color: var(--ll-accent-1); margin-left: 2px; }
.fluentform .ff-text-muted,
.fluentform .ff-el-help-message {
    color: var(--ll-accent-4);
    font-size: 13px;
    font-style: italic;
}

.fluentform .ff-el-group { margin-bottom: 28px; }

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

/* ── Checkable pills (whole-box clickable fix) ──────────────────────────── */
/* No padding on the outer div — the inner label carries it so clicking
   anywhere inside the visible box hits the label and toggles the input. */
.fluentform .ff-el-form-check {
    margin: 0 0 8px;
    background: var(--ll-base-soft);
    border: 1px solid var(--ll-border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    overflow: hidden;
    padding: 0;
}
.fluentform .ff-el-form-check .ff-el-form-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
    font-size: 15px;
    color: var(--ll-contrast);
}
.fluentform .ff-el-form-check:hover {
    border-color: var(--ll-accent-1);
    background: var(--ll-accent-1-tint);
}
.fluentform .ff-el-form-check input[type="checkbox"],
.fluentform .ff-el-form-check input[type="radio"] {
    accent-color: var(--ll-accent-1);
    width: 18px; height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}
.fluentform .ff-el-form-check:has(input:checked),
.fluentform .ff-el-form-check.ff_item_selected {
    border-color: var(--ll-accent-1);
    background: var(--ll-accent-1-tint);
}

/* Buttons */
.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button.ff-btn-next,
.fluentform button.ff-btn-prev {
    font-family: var(--ll-font-body);
    font-weight: 600;
    font-size: 15px;
    padding: 12px 28px;
    border-radius: 4px;
    border: 1px solid var(--ll-accent-1);
    background: var(--ll-accent-1);
    color: #FFFFFF;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.fluentform button.ff-btn-prev {
    background: transparent;
    color: var(--ll-accent-1);
}
.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button.ff-btn-next:hover {
    background: var(--ll-accent-1-dark);
    border-color: var(--ll-accent-1-dark);
    color: #FFFFFF;
}
.fluentform .step-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ll-border-soft);
}

.fluentform .ff_error,
.fluentform .has-error .ff-el-form-control { border-color: #B23A1F; color: #B23A1F; font-size: 13px; }

.ff-message-success {
    background: #EAF2DE;
    border: 1px solid var(--ll-accent-2);
    color: var(--ll-contrast);
    padding: 18px 22px;
    border-radius: 6px;
    font-family: var(--ll-font-display);
    font-size: 17px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONVERSATIONAL FORM MODE  (the FF Vue app — class names verified from DOM)
   Real class names: .ffc_conv_form, .ffc_question, .f-radios-wrap, .f-radios,
   .f-key, .f-label, .f-progress, .ffc_power, .ffc-counter, .ff_conv_input
   ═══════════════════════════════════════════════════════════════════════════ */

[class*="ff_conv_app"],
.ffc_conv_form,
.ff_conv_section_wrapper {
    background: var(--ll-base) !important;
    color: var(--ll-contrast) !important;
    font-family: var(--ll-font-body) !important;
}

/* Question heading + sub-label */
.ffc_conv_form .fh2,
.ffc_conv_form .f-label,
.ffc_conv_form .ffc_q_header,
.ffc_conv_form .ffc_question h1,
.ffc_conv_form .ffc_question h2 {
    font-family: var(--ll-font-display) !important;
    color: var(--ll-contrast) !important;
    font-weight: 400 !important;
}
.ffc_conv_form .f-label-sub,
.ffc_conv_form .f-help,
.ffc_conv_form .ffc_progress_label {
    color: var(--ll-accent-4) !important;
    font-family: var(--ll-font-body) !important;
}
.ffc_conv_form .f-required { color: var(--ll-accent-1) !important; }

/* Question counter chip (the "1→") — was blue. The blue is set by the FF
   inline style on .ffc-counter-div span (digit) + the arrow svg. */
body .ffc_conv_form .ffc-counter,
body .ffc_conv_form .ffc-counter-in,
body .ffc_conv_form .ffc-counter-div,
body .ffc_conv_form .ffc-counter-div span,
body .ffc_conv_form .ffc-counter-div *,
body .ffc_conv_form .counter-value,
body .ffc_conv_form .counter-value span,
body .ffc_conv_form .counter-icon-container,
body .ffc_conv_form .counter-icon-span,
body .ffc_conv_form .counter-icon-span svg,
body .ffc_conv_form .counter-icon-span svg *,
body .ffc_conv_form .counter-icon-span path,
body .frm-fluent-form.ff_conv_app .ffc-counter-div,
body .frm-fluent-form.ff_conv_app .ffc-counter-div span,
body .frm-fluent-form.ff_conv_app .counter-value,
body .frm-fluent-form.ff_conv_app .counter-value *,
body [class*="ff_conv_app"] .ffc-counter svg,
body [class*="ff_conv_app"] .ffc-counter svg path,
body [class*="ff_conv_app"] .ffc-counter svg *,
body [class*="ff_conv_app"] .ffc-counter [stroke],
body [class*="ff_conv_app"] .ffc-counter [fill] {
    color: var(--ll-accent-1) !important;
    fill: var(--ll-accent-1) !important;
    stroke: var(--ll-accent-1) !important;
    background: transparent !important;
}

/* Text/email/number/select inputs inside conversational form — FF inline
   rule paints these BLUE. Override. */
body .frm-fluent-form.ff_conv_app .f-answer input,
body .frm-fluent-form.ff_conv_app .f-answer input[type="text"],
body .frm-fluent-form.ff_conv_app .f-answer input[type="email"],
body .frm-fluent-form.ff_conv_app .f-answer input[type="number"],
body .frm-fluent-form.ff_conv_app .f-answer .el-input__inner,
body .frm-fluent-form.ff_conv_app .f-answer textarea,
body .frm-fluent-form.ff_conv_app .f-answer .el-select .el-input__inner,
body [class*="ff_conv_app"] .f-answer input,
body [class*="ff_conv_app"] .f-answer .el-input__inner,
body [class*="ff_conv_app"] .f-answer textarea {
    color: var(--ll-contrast) !important;
    background: var(--ll-base-soft) !important;
    border: 1px solid var(--ll-border) !important;
    -webkit-text-fill-color: var(--ll-contrast) !important;
}
body [class*="ff_conv_app"] .f-answer input::placeholder,
body [class*="ff_conv_app"] .f-answer textarea::placeholder,
body [class*="ff_conv_app"] .f-answer .el-input__inner::placeholder {
    color: var(--ll-accent-4) !important;
    opacity: 1 !important;
}

/* ── Option pills (Yes/No, multiple-choice rows) ────────────────────────── */
/* The Vue app uses .f-answer > .f-radios > li as the pill structure. The
   actual visual pill is the bare <li> — it has no class but receives the
   FF default blue background/border. .f-answer adds an outer blue border. */
.ffc_conv_form .f-radios-wrap,
.ffc_conv_form .f-radios,
.ffc_conv_form .f-answer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.ffc_conv_form .f-answer { padding: 0 !important; }

/* The actual pill — bare <li> inside .f-radios. The FF inline style uses
   the high-specificity selector
   ".ff_conv_app_X .f-answer .f-radios-wrap ul li", so we match or beat it. */
body .frm-fluent-form.ff_conv_app .f-answer .f-radios-wrap ul li,
body [class*="ff_conv_app"] .f-answer .f-radios-wrap ul li,
body .frm-fluent-form.ff_conv_app .f-answer ul.f-radios li,
body [class*="ff_conv_app"] .f-answer ul.f-radios li,
body .frm-fluent-form.ff_conv_app .f-answer ul.f-multiple li,
body [class*="ff_conv_app"] .f-answer ul.f-multiple li,
.ffc_conv_form .f-answer .f-radios-wrap ul li {
    background: var(--ll-base-soft) !important;
    border: 1px solid var(--ll-border) !important;
    border-radius: 4px !important;
    color: var(--ll-contrast) !important;
    box-shadow: none !important;
    padding: 12px 16px !important;
    margin: 0 0 8px !important;
    list-style: none !important;
    transition: background .15s, border-color .15s, color .15s !important;
    cursor: pointer;
}
[class*="ff_conv_app"] .f-answer .f-radios-wrap ul li:hover,
[class*="ff_conv_app"] .f-answer ul.f-radios li:hover,
[class*="ff_conv_app"] .f-answer ul.f-multiple li:hover,
.ffc_conv_form .f-answer .f-radios-wrap ul li:hover {
    background: var(--ll-accent-1-tint) !important;
    border-color: var(--ll-accent-1) !important;
    color: var(--ll-contrast) !important;
}
body .frm-fluent-form.ff_conv_app .f-answer .f-radios-wrap ul li.f-selected,
body .frm-fluent-form.ff_conv_app .f-answer .f-radios-wrap ul li.f-active,
body .frm-fluent-form.ff_conv_app .f-answer .f-radios-wrap ul li[aria-checked="true"],
body .frm-fluent-form.ff_conv_app .f-answer ul.f-radios li.f-selected,
body .frm-fluent-form.ff_conv_app .f-answer ul.f-multiple li.f-selected,
body [class*="ff_conv_app"] .f-answer .f-radios-wrap ul li.f-selected,
body [class*="ff_conv_app"] .f-answer .f-radios-wrap ul li.f-active,
[class*="ff_conv_app"] .f-answer .f-radios-wrap ul li.f-selected,
[class*="ff_conv_app"] .f-answer .f-radios-wrap ul li.f-active,
[class*="ff_conv_app"] .f-answer .f-radios-wrap ul li[aria-checked="true"],
[class*="ff_conv_app"] .f-answer ul.f-radios li.f-selected,
[class*="ff_conv_app"] .f-answer ul.f-multiple li.f-selected,
.ffc_conv_form .f-answer .f-radios-wrap ul li.f-selected {
    background: var(--ll-accent-1-tint) !important;
    border-color: var(--ll-accent-1) !important;
    color: var(--ll-contrast) !important;
}
/* Add a clear check mark / shadow so selected is unmistakable */
body .frm-fluent-form.ff_conv_app .f-answer .f-radios-wrap ul li.f-selected {
    box-shadow: 0 0 0 3px rgba(211,120,63,.18) !important;
}
body .frm-fluent-form.ff_conv_app .f-answer .f-radios-wrap ul li.f-selected .ffc_check_svg {
    color: var(--ll-accent-1) !important;
    fill: var(--ll-accent-1) !important;
}

/* Also override the FF inline-injected border on .f-answer (dark blue),
   .f-radios-wrap, .f-label-wrap, .f-full-width — all carry blue borders */
body [class*="ff_conv_app"] .f-answer,
body [class*="ff_conv_app"] .f-radios-wrap,
body [class*="ff_conv_app"] .f-label-wrap,
body [class*="ff_conv_app"] .f-full-width,
body .frm-fluent-form.ff_conv_app .f-answer,
body .frm-fluent-form.ff_conv_app .f-radios-wrap,
body .frm-fluent-form.ff_conv_app .f-label-wrap,
body .frm-fluent-form.ff_conv_app .f-full-width {
    border-color: transparent !important;
}

/* Letter shortcut chip (A / B / C) — hide entirely. They confuse users and
   the whole pill is already clickable. */
.ffc_conv_form .f-key,
.ffc_conv_form .f-key-hint { display: none !important; }
/* Re-tighten the pill padding now that the letter chip is gone */
.ffc_conv_form .f-radios-wrap > .f-label,
.ffc_conv_form .f-radios > .f-label { padding-left: 0 !important; }

/* The check-svg that appears on selected pill */
.ffc_conv_form .ffc_check_svg {
    color: var(--ll-accent-1) !important;
    fill: var(--ll-accent-1) !important;
}

/* ── Text / email / dropdown inputs (Element UI styled) ─────────────────── */
.ffc_conv_form .el-input__inner,
.ffc_conv_form .ff_conv_input,
.ffc_conv_form input[type="text"],
.ffc_conv_form input[type="email"],
.ffc_conv_form input[type="number"],
.ffc_conv_form textarea {
    background: var(--ll-base-soft) !important;
    border: 1px solid var(--ll-border) !important;
    color: var(--ll-contrast) !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
    height: auto !important;
}
.ffc_conv_form .el-input__inner:focus,
.ffc_conv_form .ff_conv_input:focus,
.ffc_conv_form input:focus,
.ffc_conv_form textarea:focus {
    border-color: var(--ll-accent-1) !important;
    box-shadow: 0 0 0 3px rgba(211,120,63,.18) !important;
    outline: 0 !important;
}

/* Element UI select caret + tag colors */
.ffc_conv_form .el-select__caret,
.ffc_conv_form .el-input__icon { color: var(--ll-accent-4) !important; }

/* Element UI input focus state — was blue. */
body .ffc_conv_form .el-input.is-focus .el-input__inner,
body .ffc_conv_form .el-input.is-focus,
body .ffc_conv_form .el-select.is-focus .el-input__inner,
body .ffc_conv_form .el-input__inner:focus,
body [class*="ff_conv_app"] .el-input.is-focus .el-input__inner,
body [class*="ff_conv_app"] .el-input.is-focus,
body [class*="ff_conv_app"] .el-select.is-focus .el-input__inner {
    border-color: var(--ll-accent-1) !important;
    box-shadow: 0 0 0 3px rgba(211,120,63,.18) !important;
    outline: 0 !important;
}

/* Selected checkmark SVG — strip the inline fill. SVG fill attribute beats
   plain CSS fill but is beaten by !important on the element. */
body [class*="ff_conv_app"] .ffc_check_svg,
body [class*="ff_conv_app"] .ffc_check_svg svg,
body [class*="ff_conv_app"] .ffc_check_svg svg *,
body [class*="ff_conv_app"] li.f-selected .ffc_check_svg svg,
body [class*="ff_conv_app"] li.f-selected .ffc_check_svg svg *,
body [class*="ff_conv_app"] li.f-selected svg[fill],
body [class*="ff_conv_app"] li.f-selected svg [fill] {
    fill: var(--ll-accent-1) !important;
    color: var(--ll-accent-1) !important;
}

/* ── Progress bar at top ────────────────────────────────────────────────── */
.ffc_conv_form .f-progress,
.ffc_conv_form .ffc_progress {
    background: var(--ll-border-soft) !important;
    height: 4px !important;
    border-radius: 0 !important;
}
.ffc_conv_form .f-progress-bar,
.ffc_conv_form .f-progress-bar-inner {
    background: var(--ll-accent-1) !important;
    border-radius: 0 !important;
    transition: width .35s ease !important;
}

/* ── Bottom-right "Next / OK / Submit" enter button ────────────────────── */
.ffc_conv_form .f-enter,
.ffc_conv_form .ff_btn_chat_style,
.ffc_conv_form button.f-next,
.ffc_conv_form .f-enter button {
    background: var(--ll-accent-1) !important;
    border: 1px solid var(--ll-accent-1) !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    padding: 10px 22px !important;
    font-family: var(--ll-font-body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s !important;
}
.ffc_conv_form .f-enter:hover,
.ffc_conv_form .ff_btn_chat_style:hover,
.ffc_conv_form button.f-next:hover {
    background: var(--ll-accent-1-dark) !important;
    border-color: var(--ll-accent-1-dark) !important;
}

/* ── Up/down nav arrows in the corner (Prev/Next chevrons) ────────────── */
/* These were tiny (25x22) and clipped over the progress bar. Make them
   ≥44px tap targets, branded, and lifted clear of the progress bar. */
body .ffc_conv_form .f-nav,
body .ffc_conv_form .footer-inner-wrap {
    background: transparent !important;
    bottom: 56px !important;        /* lift clear of the progress bar */
    right: 16px !important;
    gap: 6px !important;
}
body .ffc_conv_form .f-nav button,
body .ffc_conv_form .f-next,
body .ffc_conv_form .f-prev,
body .ffc_conv_form a.f-next,
body .ffc_conv_form a.f-prev {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--ll-base-soft) !important;
    border: 1px solid var(--ll-accent-1) !important;
    color: var(--ll-accent-1) !important;
    border-radius: 4px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    box-shadow: var(--ll-shadow) !important;
}
body .ffc_conv_form .f-nav button svg,
body .ffc_conv_form .f-next svg,
body .ffc_conv_form .f-prev svg,
body .ffc_conv_form a.f-next svg,
body .ffc_conv_form a.f-prev svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
body .ffc_conv_form .f-nav button:hover,
body .ffc_conv_form .f-next:hover,
body .ffc_conv_form .f-prev:hover {
    background: var(--ll-accent-1) !important;
    border-color: var(--ll-accent-1) !important;
    color: #FFFFFF !important;
}
body .ffc_conv_form .f-nav-text {
    color: var(--ll-accent-4) !important;
    font-size: 12px !important;
}

/* Progress bar — pin to the bottom of the viewport. Override the top
   position the FF Vue app inlines. */
body .ffc_conv_form .f-progress,
body .ffc_conv_form .ffc_progress,
body [class*="ff_conv_app"] .f-progress {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 5 !important;
    width: 100% !important;
    height: 4px !important;
    border-radius: 0 !important;
}
body .ffc_conv_form .ffc_progress_label,
body [class*="ff_conv_app"] .ffc_progress_label {
    position: fixed !important;
    bottom: 6px !important;
    top: auto !important;
    left: 12px !important;
    right: auto !important;
    background: var(--ll-base) !important;
    padding: 2px 8px !important;
    font-family: var(--ll-font-body) !important;
    font-size: 12px !important;
    color: var(--ll-accent-4) !important;
    border-radius: 3px !important;
    z-index: 6 !important;
}

/* ── Hide "Powered by Fluent Forms" branding bar (the big blue badge) ─── */
.ffc_conv_form .ffc_power,
.ffc_conv_form .ffc_power *,
.ffc_power,
[class*="ff_conv_app"] .ffc_power { display: none !important; }

/* Disable scroll-snap on conversational form — the FF Vue app snap-scrolls
   the wheel which feels broken. Let the native wheel behave normally. */
[class*="ff_conv_app"],
.ffc_conv_form,
.ff_conv_section_wrapper,
.ffc_question { scroll-snap-type: none !important; scroll-snap-align: none !important; }

/* Global override: kill any leftover FF default blue accents that target
   `--fluentform-primary` / inline blue. */
[class*="ff_conv_app"] [style*="background-color: rgb(26, 126, 251)"],
[class*="ff_conv_app"] [style*="background-color:#1a7efb"] {
    background-color: var(--ll-accent-1) !important;
}
[class*="ff_conv_app"] [style*="color: rgb(26, 126, 251)"],
[class*="ff_conv_app"] [style*="color:#1a7efb"] {
    color: var(--ll-accent-1) !important;
}

@media (max-width: 540px) {
    .fluentform { padding: 20px 16px 24px; }
}