.rhpro-assessment-rootline-pending .frm_page_bar.frm_rootline {
  opacity: 0;
  visibility: hidden;
}

.rhpro-assessment-rootline-ready .frm_page_bar.frm_rootline {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}

.frm_forms.with_frm_style .frm_form_field.frm_text_field,
.frm_forms.with_frm_style .frm_form_field.frm_email_container,
.frm_forms.with_frm_style .frm_form_field.frm_number_field,
.frm_forms.with_frm_style .frm_form_field.frm_phone_container,
.frm_forms.with_frm_style .frm_form_field.frm_url_container,
.frm_forms.with_frm_style .frm_form_field.frm_textarea_container,
.frm_forms.with_frm_style .frm_form_field.frm_select_field,
.frm_forms.with_frm_style .frm_form_field.frm_checkbox,
.frm_forms.with_frm_style .frm_form_field.frm_radio,
.frm_forms.with_frm_style .frm_top_container.horizontal_radio,
.frm_forms.with_frm_style .frm_top_container.vertical_radio {
  background: #f8fbfc;
  border: 1px solid #e3eef2;
  border-radius: 16px;
  padding: 16px 18px;
  margin: 14px 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.frm_forms.with_frm_style .frm_form_field.frm_text_field .frm_primary_label,
.frm_forms.with_frm_style .frm_form_field.frm_email_container .frm_primary_label,
.frm_forms.with_frm_style .frm_form_field.frm_number_field .frm_primary_label,
.frm_forms.with_frm_style .frm_form_field.frm_phone_container .frm_primary_label,
.frm_forms.with_frm_style .frm_form_field.frm_url_container .frm_primary_label,
.frm_forms.with_frm_style .frm_form_field.frm_textarea_container .frm_primary_label,
.frm_forms.with_frm_style .frm_form_field.frm_select_field .frm_primary_label,
.frm_forms.with_frm_style .frm_form_field.frm_checkbox .frm_primary_label,
.frm_forms.with_frm_style .frm_form_field.frm_radio .frm_primary_label,
.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_primary_label {
  margin-bottom: 8px;
}

.frm_forms.with_frm_style .frm_form_field.frm_text_field input[type="text"],
.frm_forms.with_frm_style .frm_form_field.frm_email_container input[type="email"],
.frm_forms.with_frm_style .frm_form_field.frm_number_field input[type="number"],
.frm_forms.with_frm_style .frm_form_field.frm_phone_container input[type="tel"],
.frm_forms.with_frm_style .frm_form_field.frm_url_container input[type="url"],
.frm_forms.with_frm_style .frm_form_field.frm_textarea_container textarea,
.frm_forms.with_frm_style .frm_form_field.frm_select_field select {
  border: 1px solid #c7dbe2;
  border-radius: 12px;
  background: #fff;
  color: #08334c;
  min-height: 46px;
  padding: 10px 14px;
  box-shadow: none;
}

.frm_forms.with_frm_style .frm_form_field.frm_textarea_container textarea {
  min-height: 140px;
  resize: vertical;
}

.frm_forms.with_frm_style .frm_form_field.frm_text_field input[type="text"]:focus,
.frm_forms.with_frm_style .frm_form_field.frm_email_container input[type="email"]:focus,
.frm_forms.with_frm_style .frm_form_field.frm_number_field input[type="number"]:focus,
.frm_forms.with_frm_style .frm_form_field.frm_phone_container input[type="tel"]:focus,
.frm_forms.with_frm_style .frm_form_field.frm_url_container input[type="url"]:focus,
.frm_forms.with_frm_style .frm_form_field.frm_textarea_container textarea:focus,
.frm_forms.with_frm_style .frm_form_field.frm_select_field select:focus {
  border-color: #0b7285;
  box-shadow: 0 0 0 4px rgba(11, 114, 133, 0.12);
  outline: none;
}

.frm_forms.with_frm_style .frm_form_field.frm_checkbox .frm_opt_container,
.frm_forms.with_frm_style .frm_form_field.frm_radio .frm_opt_container {
  display: grid;
  gap: 10px;
}

.frm_forms.with_frm_style .frm_form_field.frm_checkbox .frm_checkbox label,
.frm_forms.with_frm_style .frm_form_field.frm_radio .frm_radio label:not(.frm_image_options_container) {
  color: #08334c;
  font-weight: 500;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_opt_container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_radio label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid #c7dbe2;
  border-radius: 999px;
  background: #fff;
  color: #08334c;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
  user-select: none;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_radio label:hover {
  border-color: #99c4cf;
  transform: translateY(-1px);
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_radio input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_radio label:has(input:checked) {
  background: #0b7285;
  color: #fff !important;
  border-color: #0b7285;
  box-shadow: 0 0 0 4px rgba(11, 114, 133, 0.12);
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_radio label:has(input:focus-visible) {
  outline: 2px solid #0b7285;
  outline-offset: 3px;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_radio input:disabled + label,
.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_radio label:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio .frm_description {
  margin-top: 10px;
  font-size: 0.92rem;
  color: #415a66;
  line-height: 1.35;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale .frm_opt_container .frm_radio:nth-child(1) label::after,
.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale-reverse .frm_opt_container .frm_radio:nth-child(5) label::after {
  content: " 😣";
  font-size: 1.05rem;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale .frm_opt_container .frm_radio:nth-child(2) label::after,
.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale-reverse .frm_opt_container .frm_radio:nth-child(4) label::after {
  content: " 😕";
  font-size: 1.05rem;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale .frm_opt_container .frm_radio:nth-child(3) label::after,
.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale-reverse .frm_opt_container .frm_radio:nth-child(3) label::after {
  content: " 😐";
  font-size: 1.05rem;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale .frm_opt_container .frm_radio:nth-child(4) label::after,
.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale-reverse .frm_opt_container .frm_radio:nth-child(2) label::after {
  content: " 🙂";
  font-size: 1.05rem;
}

.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale .frm_opt_container .frm_radio:nth-child(5) label::after,
.frm_forms.with_frm_style .frm_top_container.horizontal_radio.rhpro-emoji-scale-reverse .frm_opt_container .frm_radio:nth-child(1) label::after {
  content: " 😄";
  font-size: 1.05rem;
}

/* =======================================================================
   Discover Your Resonance Rating (Formidable)
   Scoped to: <form id="form_discover-your-resonance-rating">
   ======================================================================= */
form#form_discover-your-resonance-rating {
  /* =====================================================================
     Rootline ONLY (NOT progress bar)
     - Scoped to this form AND to .frm_page_bar.frm_rootline
     - Avoids leaking icons into other bars/forms
     ===================================================================== */

  /* Hide the step numbers if you're using no-numbers rootline */
  .frm_page_bar.frm_rootline.frm_no_numbers
  .frm_rootline_single input[type="button"] {
    color: transparent;
  }

  /* Keep the rootline in one horizontal row, allow horizontal scroll on small screens */
  .frm_page_bar.frm_rootline {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
    flex-wrap: nowrap;               /* don't wrap to new lines */
    overflow-x: auto;                /* let it scroll horizontally instead */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Make each step shrink-to-fit so they sit side-by-side */
  .frm_page_bar.frm_rootline > .frm_rootline_single {
    position: relative;              /* needed for ::before */
    display: inline-flex;
    flex: 0 0 auto;                  /* no flex growth; keep natural width */
    flex-direction: column;
    align-items: center;
    min-width: 80px;                 /* tweak if labels truncate too much */
    text-align: center;
  }

  /* Ensure circles don't stretch full-width on mobile */
  .frm_page_bar.frm_rootline .frm_rootline_single input[type="button"] {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
  }

  /* Keep titles compact so the row stays short */
  .frm_page_bar.frm_rootline .frm_rootline_title {
    margin-top: 6px;
    white-space: nowrap;             /* single line */
    max-width: 12ch;                 /* trims long labels */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .82rem;
  }

  /* ---- Icon overlay: ONLY for rootline in THIS form ---- */
  .frm_page_bar.frm_rootline .frm_rootline_single::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;             /* match your circle */
    height: 48px;            /* match your circle */
    line-height: 48px;       /* vertical centering */
    font-size: 18px;
    font-family: "Font Awesome 6 Free";  /* or "Font Awesome 5 Free" */
    font-weight: 900;        /* solid */
    pointer-events: none;
    color: #0b7285;

    /* KEY: no fallback icon so unrelated steps show nothing */
    content: none;
  }

  /* Map icons by step label (using the input's aria-label) */
  .frm_page_bar.frm_rootline .frm_rootline_single:has(input[aria-label="Body"])::before      { content: "\f007"; } /* user */
  .frm_page_bar.frm_rootline .frm_rootline_single:has(input[aria-label="Heart"])::before     { content: "\f004"; } /* heart */
  .frm_page_bar.frm_rootline .frm_rootline_single:has(input[aria-label="Mind"])::before      { content: "\f5dc"; } /* brain */
  .frm_page_bar.frm_rootline .frm_rootline_single:has(input[aria-label="Soul"])::before      { content: "\f5bb"; } /* spa/lotus */
  .frm_page_bar.frm_rootline .frm_rootline_single:has(input[aria-label="Alignment"])::before { content: "\f14e"; } /* compass */

  /* Color states to match your circle styling */
  .frm_page_bar.frm_rootline .frm_rootline_single.frm_current_page::before {
    color: #fff; /* white icon on current teal circle */
  }

  .frm_page_bar.frm_rootline .frm_rootline_single:has(~ .frm_current_page)::before {
    color: #0b7285;            /* completed steps */
    opacity: 0.95;
  }

  /* Upcoming steps (optional softer tone) */
  .frm_page_bar.frm_rootline .frm_rootline_single:not(.frm_current_page):not(:has(~ .frm_current_page))::before {
    opacity: 0.6;
  }
}

form#form_discover-your-resonance-rating
.frm_page_bar.frm_rootline
.frm_rootline_single.frm_current_page
.frm_rootline_title {
  color: #08334c;
}

/* =======================================================================
   Safety belt: if any non-rootline bar still contains .frm_rootline_single
   (rare, but possible), force the icon off.
   ======================================================================= */
form#form_discover-your-resonance-rating .frm_page_bar:not(.frm_rootline) .frm_rootline_single::before {
  content: none !important;
}