/**
* Fluent Forms skin — maps FF's default markup (.ff-*) onto the Safari Premium
* spice design tokens, scoped under .sp-ff so it never touches the WP admin or
* other plugins. Loaded only on pages that render a FF form.
*/
.sp-ff .fluentform .ff-el-group {
margin-bottom: 18px;
}
/* Labels */
.sp-ff .fluentform .ff-el-input--label label {
font-family: var(--sp-font-sans);
font-size: var(--sp-text-xs);
font-weight: 600;
letter-spacing: var(--sp-tracking-wide);
text-transform: uppercase;
color: var(--sp-color-muted-brown);
margin-bottom: 6px;
}
.sp-ff .fluentform .ff-el-is-required.asterisk-right label:after {
color: var(--sp-color-burnt-orange);
}
/* Inputs, selects, textareas */
.sp-ff .fluentform input[type="text"],
.sp-ff .fluentform input[type="email"],
.sp-ff .fluentform input[type="tel"],
.sp-ff .fluentform input[type="url"],
.sp-ff .fluentform input[type="number"],
.sp-ff .fluentform input[type="date"],
.sp-ff .fluentform select,
.sp-ff .fluentform textarea {
min-height: 48px;
background: var(--sp-color-off-white);
border: 1px solid var(--sp-color-card-border);
border-radius: var(--sp-radius-md);
padding: 0 14px;
font-family: var(--sp-font-sans);
font-size: var(--sp-text-base);
color: var(--sp-color-brown);
width: 100%;
box-shadow: none;
transition: border-color var(--sp-dur-2) var(--sp-ease), box-shadow var(--sp-dur-2) var(--sp-ease);
}
.sp-ff .fluentform textarea {
min-height: 100px;
padding: 12px 14px;
line-height: var(--sp-leading-base);
}
.sp-ff .fluentform input:focus,
.sp-ff .fluentform select:focus,
.sp-ff .fluentform textarea:focus {
outline: none;
border-color: var(--sp-color-burnt-orange);
box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15);
}
.sp-ff .fluentform ::placeholder { color: var(--sp-color-placeholder-text); }
/* Two-up rows: any field given the ff_col_half container class */
@media (min-width: 600px) {
.sp-ff .fluentform .ff-el-group.ff_col_half {
display: inline-block;
width: calc(50% - 9px);
vertical-align: top;
}
.sp-ff .fluentform .ff-el-group.ff_col_half:nth-of-type(odd) { margin-right: 14px; }
}
/* Checkbox / radio "interest" list — render as soft chips.
FF's own default CSS forces .ff-el-form-check to display:block (label + input
stack, ~57px tall, reading as misaligned). We override with !important to force
a single centered inline pill. The label and input are flexed + centered too. */
.sp-ff .fluentform .ff-el-form-check {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 0 8px 8px 0 !important;
padding: 8px 14px !important;
min-height: 0;
background: var(--sp-color-cream);
border: 1px solid var(--sp-color-card-border);
border-radius: var(--sp-radius-pill);
cursor: pointer;
vertical-align: middle;
transition: background var(--sp-dur-2) var(--sp-ease), border-color var(--sp-dur-2) var(--sp-ease), color var(--sp-dur-2) var(--sp-ease);
}
.sp-ff .fluentform .ff-el-form-check-label,
.sp-ff .fluentform .ff-el-form-check label {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2;
cursor: pointer;
}
/* FF's default theme hides the real and wraps the option text in a
styled as its own white bordered box — producing a box-in-a-box inside
our pill. Flatten that span so the text sits cleanly in the pill; the pill's
:has(:checked) tint below is the selected-state indicator. */
.sp-ff .fluentform .ff-el-form-check-label > span {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
font: inherit;
color: inherit;
min-width: 0 !important;
min-height: 0 !important;
}
.sp-ff .fluentform .ff-el-form-check input { display: none; }
/* Tint the whole pill when its option is selected. */
.sp-ff .fluentform .ff-el-form-check:has(input:checked) {
background: rgba(194, 65, 12, 0.10);
border-color: var(--sp-color-burnt-orange);
color: var(--sp-color-burnt-orange);
}
/* Submit button — match the primary sp-button */
.sp-ff .fluentform .ff-btn-submit,
.sp-ff .fluentform .ff_submit_btn_wrapper button {
background: var(--sp-color-burnt-orange);
color: #fff;
border: none;
border-radius: var(--sp-radius-pill);
font-family: var(--sp-font-sans);
font-weight: 600;
font-size: var(--sp-text-base);
padding: 14px 28px;
min-height: 52px;
cursor: pointer;
transition: background var(--sp-dur-2) var(--sp-ease), transform var(--sp-dur-2) var(--sp-ease);
}
.sp-ff .fluentform .ff-btn-submit:hover {
background: var(--sp-color-sunset);
transform: translateY(-1px);
}
/* Validation + success messaging */
.sp-ff .fluentform .error,
.sp-ff .fluentform .text-danger {
color: var(--sp-color-burnt-orange);
font-size: var(--sp-text-xs);
}
.sp-ff .ff-message-success {
background: var(--sp-color-cream);
border: 1px solid var(--sp-color-card-border);
border-radius: var(--sp-radius-md);
padding: 18px 20px;
color: var(--sp-color-brown);
font-family: var(--sp-font-sans);
}
/* Inline variant (homepage newsletter on dark): single email + button in a row.
This FF form nests fields in a plain