/* Updated: 2026-08-04 */
/* ==========================================================================
   FLUENT FORMS — GENERIC BASELINE
   Applies to every Fluent Forms embed sitewide (surveys, downloads, quizzes,
   conversational/landing forms) so a new form is styled "in the spirit"
   of the site automatically, without writing form-specific CSS each time.

   Scoped by Fluent Forms' own universal classes (.fluentform, .ff-default,
   [class*="ff_conv_app_"]) rather than any single form's numeric ID — safe
   to leave loaded globally.

   A page or form needs a different treatment (e.g. the compact inline
   download widget in blog-page.css), override with a more specific
   selector there — see ".blog-download-form .fluentform" for the pattern.
   ========================================================================== */

/* ==========================================================================
   STANDARD LAYOUT — card container
   ========================================================================== */

.fluentform {
  counter-reset: ff-section;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 48px 40px !important;
  background: var(--surface-0) !important;
  border: 1px solid var(--surface-200) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 15px var(--shadow-20) !important;
}

/* ==========================================================================
   INTRO BLOCK — first paragraph bold = title, following paragraphs = lead
   ========================================================================== */

.fluentform .ff-custom_html {
  margin-bottom: 40px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid var(--surface-200) !important;
}

.fluentform .ff-custom_html p strong {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--text-color) !important;
  letter-spacing: -0.01em !important;
}

.fluentform .ff-custom_html p:not(:has(strong)) {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
  margin-top: 12px !important;
}

/* ==========================================================================
   SECTION BREAKS — auto-numbered badges, echoes the site's badge language
   ========================================================================== */

.fluentform .ff-el-section-break {
  counter-increment: ff-section;
  margin: 48px 0 28px !important;
}

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

.fluentform .ff-el-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--brand-primary) !important;
  margin-bottom: 12px !important;
}

.fluentform .ff-el-section-title::before {
  content: counter(ff-section);
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.fluentform .ff-section_break_desk p {
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: var(--text-muted) !important;
  margin: 0 0 16px 40px !important;
}

.fluentform .ff-el-section-break hr {
  border: none !important;
  border-top: 1px solid var(--surface-200) !important;
  margin: 0 !important;
}

/* ==========================================================================
   QUESTIONS / FIELD LABELS
   ========================================================================== */

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

.fluentform .ff-el-input--label label {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--text-color) !important;
  margin-bottom: 14px !important;
}

.fluentform .ff-el-is-required label::after {
  content: " *" !important;
  color: var(--brand-red) !important;
}

/* ==========================================================================
   RADIO / CHECKBOX OPTIONS — styled as selectable pills, matching the card
   language used elsewhere on the site (benefit-card, faq-item)
   ========================================================================== */

.fluentform .ff-el-input--content:has(.ff-el-form-check) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.fluentform .ff-el-form-check {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

.fluentform .ff-el-form-check-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid var(--surface-200) !important;
  border-radius: 8px !important;
  background: var(--surface-0) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-color) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

.fluentform .ff-el-form-check-label:hover {
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary-soft) !important;
}

.fluentform .ff-el-form-check-label:has(input:checked) {
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary-soft) !important;
  color: var(--brand-teal-dark) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px var(--brand-primary) !important;
}

.fluentform .ff-el-form-check-input,
.fluentform input[type="radio"],
.fluentform input[type="checkbox"] {
  accent-color: var(--brand-primary) !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.fluentform .ff-el-form-check-label span {
  line-height: 1.3 !important;
}

/* Terms & conditions / plain single checkboxes — not a quiz option, so skip
   the pill card treatment and lay out as a simple checkbox + text line */
.fluentform .ff-el-form-check-label.ff_tc_label {
  display: flex !important;
  align-items: flex-start !important;
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

.fluentform .ff-el-form-check-label.ff_tc_label:hover,
.fluentform .ff-el-form-check-label.ff_tc_label:has(input:checked) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-color) !important;
  font-weight: 400 !important;
}

.fluentform .ff_t_c {
  font-size: 0.875rem !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

.fluentform .ff_t_c a {
  color: var(--brand-primary) !important;
}

/* ==========================================================================
   TEXT / EMAIL / TEL / TEXTAREA / SELECT FIELDS
   ========================================================================== */

.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 textarea,
.fluentform select {
  width: 100% !important;
  padding: 14px 18px !important;
  border: 1px solid var(--surface-200) !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--text-color) !important;
  background: var(--surface-0) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
  outline: none !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px var(--brand-primary-transparent) !important;
}

.fluentform ::placeholder {
  color: var(--surface-400) !important;
}

/* ==========================================================================
   HIDDEN / CALCULATION FIELDS — never rendered
   ========================================================================== */

.fluentform .ff_hidden {
  display: none !important;
}

/* ==========================================================================
   SUBMIT / SECONDARY BUTTONS
   ========================================================================== */

.fluentform .ff_submit_btn_wrapper {
  margin-top: 36px !important;
}

.fluentform .ff-btn-submit {
  width: 100% !important;
  background: var(--brand-secondary) !important;
  color: var(--surface-0) !important;
  border: 2px solid var(--brand-secondary) !important;
  padding: 16px 32px !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px var(--shadow-20) !important;
}

.fluentform .ff-btn-submit:hover {
  background: var(--brand-secondary-2) !important;
  border-color: var(--brand-secondary-2) !important;
  transform: translateY(-2px) !important;
}

.ff-default .ff-btn-secondary:not(.ff_btn_no_style) {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  border-radius: 30px !important;
  padding: 5px 15px !important;
  color: var(--surface-0) !important;
}

/* ==========================================================================
   MULTI-STEP FORMS — progress bar, step nav, paired fields
   ========================================================================== */

.fluentform .ff-el-progress {
  background-color: var(--surface-200) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.fluentform .ff-el-progress-bar {
  background-color: var(--brand-primary) !important;
  border-radius: 999px !important;
}

.fluentform .ff-el-progress-status {
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 10px !important;
}

.fluentform .step-nav {
  margin-top: 32px !important;
}

.ff-default .ff-btn-secondary.ff-btn-prev {
  background-color: transparent !important;
  border-color: var(--surface-300) !important;
  color: var(--text-muted) !important;
}

.ff-default .ff-btn-secondary.ff-btn-prev:hover {
  background-color: var(--surface-100) !important;
  border-color: var(--surface-300) !important;
}

/* Paired fields (e.g. first name / last name) laid out side by side */
.fluentform .ff-t-container {
  display: flex !important;
  gap: 16px !important;
}

.fluentform .ff-t-cell {
  flex: 1 1 0 !important;
}

/* ==========================================================================
   VALIDATION ERRORS
   ========================================================================== */

[id^="fluentform_"][id$="_errors"] {
  max-width: 720px !important;
  margin: 12px auto 0 !important;
  font-family: var(--font-body) !important;
}

.fluentform .error,
.fluentform [class*="error-message"] {
  color: var(--brand-red) !important;
  font-size: 0.8125rem !important;
  margin-top: 6px !important;
  display: block !important;
}

/* ==========================================================================
   CONVERSATIONAL / LANDING-PAGE LAYOUT
   Fluent Forms adds a per-form numeric class like "ff_conv_app_8" — matched
   here with an attribute selector so it applies to any conversational form
   regardless of ID, current or future.
   ========================================================================== */

[class*="ff_conv_app_"]::before {
  background-size: contain;
  right: -30%;
}

.ff_conv_app_frame .vff.vff_layout_default .f-container {
  margin-left: 40px;
  left: auto;
}

.ff_landing-custom-logo {
  max-width: 300px;
}

.ff_landing_page_body .ff_landing_wrapper .ff_landing_form .ff_landing_header h1 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .fluentform {
    padding: 32px 20px !important;
    border-radius: 12px !important;
  }

  .fluentform .ff-el-input--content:has(.ff-el-form-check) {
    flex-direction: column !important;
  }

  .fluentform .ff-section_break_desk p {
    margin-left: 0 !important;
  }
}