/* Fluent Forms in the brand: same inputs, labels and buttons as the rest of the site. Loaded site wide.
   Hard set (!important): Fluent Forms ships its own stylesheet and per-form inline colours, and the parent
   theme restyles inputs and buttons on hover and focus. These win over all of them in every state. */
.fluentform { font-family: var(--sans) !important; color: var(--body) !important; }
.fluentform .ff-el-group { margin-bottom: 1rem !important; }
.fluentform .ff-el-input--label label, .fluentform .ff-el-form-check-label { text-transform: none !important; text-shadow: none !important; }
.fluentform .ff-el-input--label label { font: 600 .82rem/1.3 var(--sans) !important; color: var(--ink) !important; letter-spacing: .02em !important; margin-bottom: .3rem !important; }
.fluentform .ff-el-input--label.asterisk-right label:after, .fluentform .ff-el-input--label.asterisk-left label:before { color: var(--accent-ink) !important; }

/* Fields: text, email, number, phone, date, textarea, select. Same look in every state. */
.fluentform .ff-el-form-control, .fluentform input.ff-el-form-control, .fluentform textarea.ff-el-form-control, .fluentform select.ff-el-form-control,
.fluentform .ff-el-form-control:hover, .fluentform .ff-el-form-control:focus, .fluentform .ff-el-form-control:active, .fluentform .ff-el-form-control:focus-visible {
	width: 100% !important; border: 1px solid var(--line) !important; border-radius: var(--r-sm) !important; background-color: var(--paper) !important; color: var(--ink) !important;
	padding: .65rem .8rem !important; font: 400 .98rem/1.4 var(--sans) !important; box-shadow: none !important; text-shadow: none !important; transition: border-color .15s var(--ease) !important; }
.fluentform .ff-el-form-control::placeholder { color: var(--muted) !important; opacity: 1 !important; }
.fluentform .ff-el-form-control:hover { border-color: var(--muted) !important; }
.fluentform .ff-el-form-control:focus, .fluentform .ff-el-form-control:focus-visible { outline: 2px solid var(--accent-ink) !important; outline-offset: 1px !important; border-color: var(--accent-ink) !important; }
.fluentform textarea.ff-el-form-control { min-height: 6rem !important; resize: vertical !important; }
.fluentform select.ff-el-form-control { appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%237a7f88' stroke-width='1.8'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .8rem center !important; padding-right: 2.4rem !important; }
.fluentform .ff-el-form-check { margin: .3rem 0 !important; }
.fluentform .ff-el-form-check-label { font-size: .92rem !important; color: var(--body) !important; display: flex !important; gap: .55rem !important; align-items: flex-start !important; }
.fluentform .ff-el-form-check-input { accent-color: var(--ink) !important; width: 1rem !important; height: 1rem !important; margin-top: .25rem !important; }
.fluentform .ff-el-help-message, .fluentform .ff-el-input--content .ff-el-help-message { font-size: .8rem !important; color: var(--muted) !important; margin-top: .3rem !important; }

/* Buttons: submit, next, previous, upload. The solid brand pill in every state, whatever the form settings say. */
.fluentform .ff-btn, .fluentform .ff-btn-submit, .fluentform .ff_btn_style, .fluentform .ff-btn-next, .fluentform .ff-btn-prev, .fluentform button[type="submit"], .fluentform input[type="submit"],
.fluentform .ff-btn:hover, .fluentform .ff-btn-submit:hover, .fluentform .ff_btn_style:hover, .fluentform .ff-btn-next:hover, .fluentform .ff-btn-prev:hover, .fluentform button[type="submit"]:hover, .fluentform input[type="submit"]:hover,
.fluentform .ff-btn:focus, .fluentform .ff-btn-submit:focus, .fluentform .ff_btn_style:focus, .fluentform .ff-btn-next:focus, .fluentform .ff-btn-prev:focus, .fluentform button[type="submit"]:focus, .fluentform input[type="submit"]:focus,
.fluentform .ff-btn:active, .fluentform .ff-btn-submit:active, .fluentform .ff_btn_style:active, .fluentform .ff-btn-next:active, .fluentform .ff-btn-prev:active, .fluentform button[type="submit"]:active, .fluentform input[type="submit"]:active {
	display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .5rem !important; width: auto !important; min-height: 0 !important;
	border-radius: var(--r-pill) !important; padding: .85rem 1.5rem !important; font: 600 .95rem/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
	background-color: var(--ink) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--ink) !important; cursor: pointer !important;
	box-shadow: none !important; text-shadow: none !important; opacity: 1 !important; transition: background-color .15s var(--ease) !important; }
.fluentform :is(.ff-btn, .ff-btn-submit, .ff_btn_style, .ff-btn-next, .ff-btn-prev, button[type="submit"], input[type="submit"]):is(:hover, :focus-visible) { background-color: var(--char) !important; border-color: var(--char) !important; color: #fff !important; }
.fluentform :is(.ff-btn-submit, button[type="submit"], input[type="submit"]):focus-visible { outline: 2px solid var(--accent-ink) !important; outline-offset: 3px !important; }
.fluentform :is(.ff-btn, .ff-btn-submit, .ff_btn_style, button[type="submit"], input[type="submit"]):disabled { opacity: .5 !important; cursor: default !important; }
.fluentform .ff-btn-prev { background-color: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; }
.fluentform .ff-btn-prev:is(:hover, :focus-visible) { background-color: transparent !important; color: var(--ink) !important; border-color: var(--ink) !important; }

/* Messages */
.fluentform .ff-el-is-error .ff-el-form-control { border-color: oklch(45% .15 25) !important; }
.fluentform .ff-el-is-error .error, .fluentform .text-danger { color: oklch(45% .15 25) !important; font-size: .82rem !important; margin-top: .3rem !important; }
.fluentform .ff-message-success, .ff-message-success { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; padding: 1.2rem 1.4rem !important; color: var(--ink) !important; font: 400 1rem/1.5 var(--sans) !important; }
.fluentform .ff-errors-in-stack { background: oklch(97% .02 25) !important; border: 1px solid oklch(85% .06 25) !important; border-radius: var(--r-sm) !important; padding: .8rem 1rem !important; color: oklch(40% .15 25) !important; font-size: .9rem !important; }
.fluentform .ff-t-container, .fluentform .ff-column-container { gap: 0 1rem !important; }
.fluentform .ff-el-progress-bar { background: var(--ink) !important; }
.fluentform .ff-el-progress { background: var(--stone) !important; border-radius: var(--r-pill) !important; }
.fluentform .ff-step-titles li.ff_active:before { background: var(--ink) !important; }