/* Credit Application form. Scoped via the generic .fluentform class rather
   than a form-ID-specific one (e.g. .fluentform_wrapper_3): this file is
   only enqueued on the credit-application page itself (see functions.php),
   so that's already sufficient scoping — and the form's numeric ID isn't
   stable across environments (export/import assigns a new ID whenever the
   target site already has a form using the original one). */

/* Section-break headings ("Additional Company Information", "Trade Reference 1"…)
   inherited the theme's global H3 (32px) with a plain <hr> underneath, reading
   as an oversized, disconnected page heading rather than a labeled divider
   between groups of fields. Turned into a distinct navy panel — same visual
   language as the site's other labeled-section treatments (dark bg, white
   text) — so each new section reads as its own clearly separated block. */
.fluentform .ff-el-group.ff-el-section-break {
    background: #183a4b;
    border-radius: 8px;
    padding: 14px 20px !important;
    margin-top: 28px !important;
    margin-bottom: 16px !important;
}

.fluentform .ff-el-group.ff-el-section-break:first-of-type {
    margin-top: 6px !important;
}

.fluentform .ff-el-section-break .ff-el-section-title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.fluentform .ff-el-section-break .ff-section_break_desk {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 12px !important;
    margin-top: 3px !important;
}

.fluentform .ff-el-section-break .ff-section_break_desk:empty {
    display: none;
}

/* The <hr> duplicated the divider the panel background already provides. */
.fluentform .ff-el-section-break hr {
    display: none;
}

/* Compact field sizing/spacing to match the tighter form on /support/quote/ —
   default Fluent Forms row height/gaps read as oversized next to it. */
.fluentform .ff-el-group {
    margin-bottom: 14px !important;
}

/* Extra breathing room between logical field groups. The form's later
   sections (Additional Company Information, Trade Reference 1/2/3, etc.)
   already read as distinct groups thanks to their own dark section-break
   panels above, but the top portion (Division through Tax Exempt
   Certificate) has no such headers, so its fields all ran together with no
   visual cue for which ones belong together — e.g. Billing Address's fields
   butted directly against Shipping Address's with the same 14px gap as
   fields within the same group. Field names come from this form's own saved
   field list (visible in the Fluent Forms editor) and are stable across
   environments since all three are exports/clones of the same form. */
.fluentform .ff-el-group:has(input[data-name="input_radio"]),
.fluentform .ff-el-group:has(input[data-name="url"]),
.fluentform [data-name="address_1"],
.fluentform [data-name="address_2"],
.fluentform .ff-el-group:has(input[data-name="email"]),
.fluentform .ff-t-container:has(input[data-name="input_text_7"]),
.fluentform .ff-t-container:has(input[data-name="input_radio_2"]) {
    margin-bottom: 32px !important;
}

.fluentform .ff-el-input--label {
    margin-bottom: 4px !important;
}

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform select,
.fluentform textarea {
    padding: 8px 12px !important;
}

.fluentform textarea {
    min-height: 90px;
}

/* Dropdowns (Division, Country) lost their native arrow indicator —
   appearance:none with no replacement background-image, likely from the
   site's form theme. Draw one explicitly so it's not just blank. */
.fluentform select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23545861' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 11px 7px !important;
    padding-right: 32px !important;
}

/* Square corners + border color pinned explicitly (matching the reference
   quote form, which uses 0 border-radius) rather than relying on Fluent
   Forms' own default theme styling for this, which is easy to lose track
   of/override elsewhere on the site. */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform select,
.fluentform textarea {
    border-radius: 0 !important;
    border: 1px solid #b7b8ba !important;
}

/* Font family/size/weight didn't match the site's other form (the Marketo
   quote form on /support/quote/): this form rendered in Fluent Forms'
   defaults (Roboto, 17px, label weight 500) while the quote form uses the
   theme's heading font at a much smaller, lighter weight (Montserrat, 13px,
   weight 400). Match it here so the two forms read as the same typography,
   excluding the section-break panels, which intentionally stay larger/bolder
   as headings. */
.fluentform,
.fluentform label,
.fluentform input,
.fluentform select,
.fluentform textarea,
.fluentform button,
.fluentform legend,
.fluentform .ff-el-form-check-label {
    font-family: 'Montserrat', sans-serif !important;
}

.fluentform .ff-el-input--label label,
.fluentform legend {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #000 !important;
}

.fluentform input,
.fluentform select,
.fluentform textarea,
.fluentform .ff-el-form-check-label {
    font-size: 13px !important;
    font-weight: 400 !important;
}

.fluentform .ff-btn-submit {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
}