/* ==========================================================================
   ClearMed — Consultation / Assessment page (WooPW CFLP)
   Visual restyle only — form behaviour unchanged.
   ========================================================================== */

body.page-template-consultation,
body.page-template-consultation-php,
body.clearmed-consultation-page,
#consultationform,
form.cflp-form {
  --cm-cf-text: var(--dark-color, #3A2743);
  --cm-cf-muted: var(--text-muted, #6B5176);
  --cm-cf-border: var(--border, rgba(58, 39, 67, 0.12));
  --cm-cf-card: #ffffff;
  --cm-cf-soft: var(--bg-secondary, #FBF6F4);
  --cm-cf-radius: var(--radius-lg, 1rem);

  /* WooPW CFLP tokens → ClearMed */
  --cf-text-color: var(--dark-color, #3A2743);
  --cf-text-color-soft: var(--text-muted, #6B5176);
  --cf-number-bg-color: var(--primary-color, #8B3E8F);
  --cf-number-text-color: #ffffff;
  --cf-form-border-radius-color: color-mix(in srgb, var(--primary-color) 35%, #ffffff);
  --cf-form-border-radius: 16px;
  --cf-form-border: 1px;
  --cf-cancel-button-color: var(--secondary-color, #E8577A);
  --cf-need-help-color: var(--primary-color, #8B3E8F);
  --cflp-v2-teal: var(--primary-color, #8B3E8F);
  --cflp-v2-teal-dark: var(--primary-hover, #752E79);
  --cflp-v2-cream: var(--bg-secondary, #FBF6F4);
  --cflp-v2-border: var(--border, rgba(58, 39, 67, 0.12));
  --cflp-v2-border-strong: color-mix(in srgb, var(--primary-color) 28%, #ffffff);
  --cflp-v2-muted: var(--text-muted, #6B5176);
  --cflp-v2-radius: 16px;
  --cflp-v2-radius-sm: 12px;
}

/* Page banner / title — tighter ClearMed spacing */
body.page-template-consultation .page-banner-section,
body.page-template-consultation .section-padding.page-banner-section,
body.clearmed-consultation-page .page-banner-section,
body.page-template-consultation #consultationform .section-title,
body.page-template-consultation h1.section-title {
  font-family: var(--font-display) !important;
  color: var(--cm-cf-text) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

body.page-template-consultation .page-banner-section,
body.page-template-consultation .banner-section,
body.clearmed-consultation-page .page-banner-section {
  padding-top: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-bottom: clamp(0.75rem, 2vw, 1.25rem) !important;
  background: transparent !important;
}

body.page-template-consultation .page-banner-section.pt-5 {
  padding-top: clamp(1.25rem, 2.5vw, 2rem) !important;
}

body.page-template-consultation .page-banner-section .section-title.pb-3 {
  padding-bottom: 0.35rem !important;
}

body.page-template-consultation .breadcrumb,
body.page-template-consultation .breadcrumb a,
body.page-template-consultation .consult-breadcrumb,
body.page-template-consultation .consult-breadcrumb a {
  color: var(--cm-cf-muted) !important;
  font-size: 0.875rem;
}

body.page-template-consultation h1.section-title {
  font-size: clamp(1.55rem, 2.4vw + 0.4rem, 2.2rem) !important;
  margin-bottom: 0.5rem !important;
  text-align: center;
}

/* v2 banner (if enabled) */
body.cflp-multistep-v2 .consult-banner {
  background: linear-gradient(
    120deg,
    var(--dark-color) 0%,
    color-mix(in srgb, var(--primary-color) 75%, var(--dark-color)) 55%,
    color-mix(in srgb, var(--accent-color) 55%, var(--primary-color)) 100%
  ) !important;
  color: #fff !important;
  padding: 2rem 0 1.75rem !important;
}

body.cflp-multistep-v2 .consult-banner h1 {
  font-family: var(--font-display) !important;
  color: #fff !important;
}

body.cflp-multistep-v2 .consult-banner a,
body.cflp-multistep-v2 .consult-breadcrumb,
body.cflp-multistep-v2 .consult-breadcrumb a {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.cflp-multistep-v2 .consult-login-bar .btn-login,
body.cflp-multistep-v2 .consult-login-bar .btn-register {
  border-radius: 9999px !important;
  font-weight: 600 !important;
}

body.cflp-multistep-v2 .consult-login-bar .btn-login {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  border: none !important;
}

/* Layout shell — more page breathing room + clear column gap */
body.page-template-consultation .page-content-section .container,
body.page-template-consultation #consultationform .container,
body.clearmed-consultation-page .container {
  padding-left: clamp(1.15rem, 3vw, 2rem) !important;
  padding-right: clamp(1.15rem, 3vw, 2rem) !important;
}

#consultationform,
#consultationform .cflp-form-container,
#consultationform .consult-layout {
  max-width: 100%;
}

#consultationform .section-padding {
  padding-top: 1.5rem !important;
  padding-bottom: 2.75rem !important;
}

/* Two-column grid: left questions + right progress */
#consultationform .cflp-form-container,
#consultationform .cflp-form-container.row,
#consultationform form.cflp-form .row,
#consultationform .consult-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 1.75rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

#consultationform .cflp-form-container .form-content,
#consultationform .form-content.col-md-8,
#consultationform .form-content.col-md-9 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

#consultationform .form-sidebar,
#consultationform .form-sidebar.col-md-3,
#consultationform .form-sidebar.col-md-4,
#consultationform .consult-sidebar {
  flex: 0 0 min(340px, 100%) !important;
  width: min(340px, 100%) !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  align-self: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Step card — single clean white shell with roomier padding */
#consultationform .form-group-wrapper,
form.cflp-form .form-group-wrapper,
#consultationform .form-description-wrapper {
  background: #ffffff !important;
  border: 1px solid var(--cm-cf-border) !important;
  border-radius: 1rem !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 1.75rem 1.85rem !important;
  margin-bottom: 1rem !important;
  overflow: visible;
}

#consultationform .form-group-title,
form.cflp-form .form-group-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  margin: 0 0 1rem !important;
  padding: 0 0 0.85rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cm-cf-border) !important;
  background: transparent !important;
}

#consultationform .form-group-title-text,
#consultationform .form-group-title h2,
#consultationform .form-group-title h3,
#consultationform .form-group-title h4 {
  font-family: var(--font-display) !important;
  color: var(--cm-cf-text) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Step number bubble */
#consultationform .count-group,
#consultationform .sidebar-count-group,
#consultationform .progress-step-num,
form.cflp-form .count-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem !important;
  border-radius: 9999px !important;
  background: var(--brand-gradient) !important;
  background-image: var(--brand-gradient) !important;
  color: #ffffff !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: none !important;
  box-shadow: none !important;
}

#consultationform .form-group-wrapper:not(.active) .count-group,
#consultationform .sidebar-item:not(.active):not(.completed) .sidebar-count-group,
#consultationform .progress-step:not(.active):not(.completed) .progress-step-num {
  background: color-mix(in srgb, var(--primary-color) 14%, #ffffff) !important;
  background-image: none !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}

#consultationform .form-group-description,
#consultationform .fields-content > p,
#consultationform .form-description-wrapper > p {
  color: var(--cm-cf-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin: 0 0 0.85rem !important;
}

/* Please Note / field description boxes */
#consultationform .fields-description,
#consultationform .fields-description.paragraph-text {
  background: color-mix(in srgb, var(--primary-color) 6%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color) 16%, var(--cm-cf-border)) !important;
  border-left: 3px solid var(--primary-color) !important;
  border-radius: 0.75rem !important;
  padding: 0.9rem 1.1rem !important;
  margin: 0 0 1rem !important;
  color: var(--cm-cf-text) !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

#consultationform .fields-description strong,
#consultationform .fields-description b {
  color: var(--primary-color) !important;
}

#consultationform .fields-description ol,
#consultationform .fields-description ul {
  margin: 0.5rem 0 0 1.15rem !important;
  padding: 0 !important;
  color: var(--cm-cf-muted) !important;
}

#consultationform .fields-description li {
  margin-bottom: 0.35rem;
}

#consultationform .form-group.form-input-group .fields-description,
#consultationform .form-group.form-input-group .fields-description.paragraph-text {
  background: #ffffff !important;
  margin-bottom: 0.85rem !important;
}

/* Questions — soft distinct panels inside the white step card */
#consultationform .form-group.form-input-group,
#consultationform .fields-content > .form-group,
#consultationform .active-fields > .form-group,
#consultationform .cflp-form-group-active .form-group.form-input-group,
form.cflp-form .form-group.form-input-group,
:is(.cflp-form, .woopw-form-wrapper) #consultationform .form-group.form-input-group {
  display: block !important;
  width: 100% !important;
  margin: 0 0 0.85rem !important;
  margin-top: 0 !important;
  padding: 1.1rem 1.2rem !important;
  border: 1px solid var(--cm-cf-border) !important;
  border-radius: 0.85rem !important;
  background: var(--cm-cf-soft) !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

#consultationform .form-group.form-input-group:last-child,
#consultationform .fields-content > .form-group:last-child {
  margin-bottom: 0 !important;
}

#consultationform .form-group.form-input-group:hover,
#consultationform .fields-content > .form-group:hover {
  border-color: color-mix(in srgb, var(--primary-color) 30%, var(--cm-cf-border)) !important;
  background: color-mix(in srgb, var(--primary-color) 4%, #ffffff) !important;
}

#consultationform .form-group.form-input-group:focus-within,
#consultationform .fields-content > .form-group:focus-within,
#consultationform .form-input-group.cflp-v2-pending {
  border-color: var(--primary-color) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
}

#consultationform .form-group.deactive-group,
#consultationform .deactive-group {
  background: color-mix(in srgb, var(--cm-cf-soft) 70%, #ffffff) !important;
  opacity: 0.72;
}

/* Nested groups inside weight/height — no double boxing */
#consultationform .height-weight-UI .form-group,
#consultationform .joint-input .form-group,
#consultationform .bmi-options-input .form-group,
#consultationform .weight-block .form-group.form-input-group .form-group,
#consultationform .height-block .form-group.form-input-group .form-group {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#consultationform .form-group.form-input-group .content-wrapper,
#consultationform .form-group.form-input-group .content-wrapper.section-title {
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  margin: 0 0 0.55rem !important;
}

#consultationform .content-wrapper.section-title h4,
#consultationform .form-input-group h4,
#consultationform label.question-pointer,
#consultationform .content-wrapper.section-title.text-center h4.mb-3,
#consultationform .cflp-form label h4 {
  font-family: var(--font-sans, inherit) !important;
  color: var(--dark-color) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin: 0 0 0.65rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* Inputs */
#consultationform .form-control,
#consultationform select,
#consultationform input[type="text"],
#consultationform input[type="email"],
#consultationform input[type="tel"],
#consultationform input[type="number"],
#consultationform input[type="date"],
#consultationform textarea,
#consultationform .custom-textfield,
#consultationform .custom-textarea,
#consultationform .cflp-datepicker,
form.cflp-form .form-control,
form.cflp-form select {
  width: 100% !important;
  min-height: 40px !important;
  border: 1.5px solid var(--cm-cf-border) !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  color: var(--cm-cf-text) !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.875rem !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#consultationform textarea,
#consultationform .custom-textarea,
form.cflp-form textarea {
  border-radius: var(--radius-md, 0.75rem) !important;
  min-height: 96px !important;
}

#consultationform .form-control:focus,
#consultationform select:focus,
#consultationform input:focus,
#consultationform textarea:focus,
form.cflp-form .form-control:focus,
form.cflp-form select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
  outline: none !important;
}

/* Yes / No — compact side-by-side pills */
#consultationform .check-radio-group,
form.cflp-form .check-radio-group,
.page-template-consultation form.cflp-form .check-radio-group {
  display: flex !important;
  flex-wrap: wrap !important;
  float: none !important;
  gap: 0.5rem !important;
  margin: 0.35rem 0 0.75rem !important;
  width: 100%;
}

#consultationform .form-check.radio,
form.cflp-form .form-check.radio {
  display: inline-flex !important;
  flex: 1 1 calc(50% - 0.35rem) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#consultationform .check-radio-group .form-check.radio label,
#consultationform .check-radio-group .form-check.radio > label,
#consultationform .form-check.radio label.form-check-label,
form.cflp-form .check-radio-group .form-check.radio label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 36px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.4rem 0.9rem !important;
  gap: 0 !important;
  border: 1.5px solid var(--cm-cf-border) !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  color: var(--cm-cf-muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  word-break: normal !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#consultationform .check-radio-group .form-check.radio label:hover,
#consultationform .form-check.radio label:hover {
  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--cm-cf-border)) !important;
  background: color-mix(in srgb, var(--primary-color) 5%, #ffffff) !important;
  color: var(--cm-cf-text) !important;
  transform: none !important;
  padding: 0.4rem 0.9rem !important;
}

#consultationform .check-radio-group .form-check.radio input:checked ~ label,
#consultationform .check-radio-group .form-check.radio input:checked + label,
#consultationform .check-radio-group .form-check.radio:has(input:checked) > label,
#consultationform .form-check.radio:has(input:checked) label {
  background: color-mix(in srgb, var(--primary-color) 10%, #ffffff) !important;
  border-color: var(--primary-color) !important;
  color: var(--dark-color) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Checkbox option lists — checkbox sits inside the card, not on the border */
#consultationform .checkbox-group,
form.cflp-form .checkbox-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
  margin-top: 0.35rem !important;
  width: 100% !important;
}

#consultationform .checkbox-group .form-check,
form.cflp-form .checkbox-group .form-check {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
  float: none !important;
}

#consultationform .checkbox-group .form-check ~ .form-check {
  margin-top: 0 !important;
}

#consultationform .checkbox-group label.form-check-label,
form.cflp-form .checkbox-group label.form-check-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.7rem 0.9rem !important;
  border: 1.5px solid var(--cm-cf-border) !important;
  border-radius: 0.75rem !important;
  background: #ffffff !important;
  color: var(--cm-cf-text) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#consultationform .checkbox-group label.form-check-label:hover {
  border-color: color-mix(in srgb, var(--primary-color) 40%, var(--cm-cf-border)) !important;
  background: color-mix(in srgb, var(--primary-color) 4%, #ffffff) !important;
}

#consultationform .checkbox-group .form-check:has(input:checked) label.form-check-label,
#consultationform .checkbox-group label.form-check-label:has(input:checked),
#consultationform .checkbox-group label.form-check-label.has-class {
  border-color: var(--primary-color) !important;
  background: color-mix(in srgb, var(--primary-color) 8%, #ffffff) !important;
  color: var(--dark-color) !important;
}

/* Kill Bootstrap negative-margin checkbox offset */
#consultationform .checkbox-group .form-check .form-check-input,
#consultationform .checkbox-group label.form-check-label input[type="checkbox"],
#consultationform .checkbox-group .form-check input[type="checkbox"],
form.cflp-form .checkbox-group .form-check input[type="checkbox"] {
  float: none !important;
  position: static !important;
  margin: 0.1rem 0 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 1.05rem !important;
  height: 1.05rem !important;
  min-width: 1.05rem !important;
  min-height: 1.05rem !important;
  border: 1.5px solid color-mix(in srgb, var(--dark-color) 22%, transparent) !important;
  border-radius: 0.25rem !important;
  background: #ffffff !important;
  display: inline-grid !important;
  place-content: center !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  vertical-align: top !important;
}

#consultationform .checkbox-group .form-check input[type="checkbox"]::before,
form.cflp-form .checkbox-group .form-check input[type="checkbox"]::before {
  content: "" !important;
  width: 0.55rem !important;
  height: 0.55rem !important;
  transform: scale(0) !important;
  transition: 120ms transform ease-in-out !important;
  box-shadow: none !important;
  background-color: var(--primary-color) !important;
  border-radius: 0.1rem !important;
}

#consultationform .checkbox-group .form-check input[type="checkbox"]:checked,
#consultationform .checkbox-group label.form-check-label.has-class input.form-check-input {
  border-color: var(--primary-color) !important;
  background: color-mix(in srgb, var(--primary-color) 12%, #ffffff) !important;
}

#consultationform .checkbox-group .form-check input[type="checkbox"]:checked::before {
  transform: scale(1) !important;
  background-color: var(--primary-color) !important;
}

#consultationform .checkbox-group .form-check input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
}

/* Weight / height blocks */
#consultationform .height-weight-UI,
#consultationform .weight-block,
#consultationform .height-block {
  margin-top: 0.35rem;
}

#consultationform .height-weight-UI .form-control,
#consultationform .joint-input .form-control {
  min-height: 40px !important;
  font-size: 0.875rem !important;
}

#consultationform .height-weight-switch,
#consultationform .bmi-options-input {
  font-size: 0.8125rem !important;
}

/* Sidebar progress — single proper card (avoid double borders) */
#consultationform .form-sidebar #sidebarback,
#consultationform .form-sidebar .sidebarback,
body.page-template-consultation .form-sidebar .sidebarback {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--cm-cf-border) !important;
  border-radius: 1rem !important;
  padding: 1.5rem 1.5rem 1.35rem !important;
  box-shadow: var(--shadow-sm) !important;
}

#consultationform .form-sidebar #sidebarback {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#consultationform .form-sidebar .sidebar-back {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#consultationform .sidebar-heading,
#consultationform .form-sidebar h2.sidebar-heading,
#consultationform .form-sidebar h3,
#consultationform .form-sidebar h4,
#consultationform .form-sidebar h5 {
  font-family: var(--font-display) !important;
  color: var(--cm-cf-text) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin: 0 0 1rem !important;
  padding: 0 0 0.85rem !important;
  border-bottom: 1px solid var(--cm-cf-border) !important;
  line-height: 1.3 !important;
}

/* Soft panel for step list */
#consultationform .form-sidebar ul#formSidebar,
#consultationform .form-sidebar ul.progress-list {
  list-style: none !important;
  margin: 0 0 1.15rem !important;
  padding: 0.85rem 1rem !important;
  background: var(--cm-cf-soft) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color) 10%, var(--cm-cf-border)) !important;
  border-radius: 0.85rem !important;
}

#consultationform .sidebar-item,
#consultationform .progress-step,
#consultationform #formSidebar li {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.55rem 0.15rem !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cm-cf-muted) !important;
  list-style: none !important;
}

#consultationform .sidebar-item + .sidebar-item,
#consultationform .progress-step + .progress-step {
  border-top: 1px solid color-mix(in srgb, var(--dark-color) 8%, transparent) !important;
  margin-top: 0.15rem !important;
  padding-top: 0.7rem !important;
}

#consultationform .sidebar-item.active,
#consultationform .progress-step.active,
#consultationform .sidebar-item.cflp-v2-current-step {
  color: var(--cm-cf-text) !important;
  font-weight: 600 !important;
}

#consultationform .sidebar-title,
#consultationform .progress-step .sidebar-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

/* Primary CTA — full width in sidebar */
#consultationform .form-sidebar .btn-next,
#consultationform .form-sidebar .cflp-v2-next,
#consultationform .form-sidebar .cflp-next-group,
#consultationform .form-sidebar .sidebar-button:not(.contactus-sidebarlink),
#consultationform .form-sidebar .cflp_submit_form,
#consultationform .form-sidebar #submitBtn,
#consultationform .form-sidebar button.cflp_submit_form,
#consultationform .sidebarback .btn-next,
#consultationform .sidebarback .cflp_submit_form,
#consultationform .sidebarback #submitBtn {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  min-height: 44px !important;
  margin: 0 0 1rem !important;
  padding: 0.65rem 1.15rem !important;
  border: none !important;
  border-radius: 9999px !important;
  background: var(--brand-gradient) !important;
  background-image: var(--brand-gradient) !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-glow) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#consultationform .form-sidebar .btn-next:hover,
#consultationform .form-sidebar .cflp_submit_form:hover,
#consultationform .form-sidebar #submitBtn:hover,
#consultationform .form-sidebar .sidebar-button:not(.contactus-sidebarlink):hover {
  background: var(--brand-gradient-hover) !important;
  background-image: var(--brand-gradient-hover) !important;
  color: #ffffff !important;
}

/* Primary actions outside sidebar keep compact pills */
#consultationform .btn-next,
#consultationform .cflp-v2-next,
#consultationform .cflp-next-group,
#consultationform .sidebar-button:not(.contactus-sidebarlink),
#consultationform .cflp_submit_form,
#consultationform #submitBtn,
#consultationform button.cflp_submit_form,
form.cflp-form .btn-next,
form.cflp-form .cflp_submit_form {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  min-height: var(--btn-min-height, 38px) !important;
  padding: var(--btn-padding-y, 0.45rem) var(--btn-padding-x, 1.2rem) !important;
  border: none !important;
  border-radius: 9999px !important;
  background: var(--brand-gradient) !important;
  background-image: var(--brand-gradient) !important;
  color: #ffffff !important;
  font-size: var(--btn-font-size, 0.8125rem) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-glow) !important;
  cursor: pointer !important;
}

#consultationform .btn-next:hover,
#consultationform .cflp_submit_form:hover,
#consultationform #submitBtn:hover,
#consultationform .sidebar-button:not(.contactus-sidebarlink):hover {
  background: var(--brand-gradient-hover) !important;
  background-image: var(--brand-gradient-hover) !important;
  color: #ffffff !important;
}

#consultationform .btn-back,
#consultationform .cflp-v2-prev,
#consultationform .cflp-prev-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--btn-min-height, 38px) !important;
  padding: var(--btn-padding-y, 0.45rem) 1.1rem !important;
  border-radius: 9999px !important;
  border: 1.5px solid var(--dark-color) !important;
  background: transparent !important;
  color: var(--dark-color) !important;
  font-size: var(--btn-font-size, 0.8125rem) !important;
  font-weight: 600 !important;
}

#consultationform .btn-back:hover,
#consultationform .cflp-v2-prev:hover {
  background: var(--dark-color) !important;
  color: #ffffff !important;
}

/* Progress bar */
#consultationform .progress-bar-fill,
#consultationform .cflp-v2-progress-fill,
#consultationform .progress-bar-track .progress-bar-fill {
  background: var(--brand-gradient) !important;
  background-image: var(--brand-gradient) !important;
}

#consultationform .progress-bar-track {
  background: color-mix(in srgb, var(--primary-color) 12%, #ffffff) !important;
  border-radius: 9999px !important;
  overflow: hidden;
}

#consultationform .step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

/* Help box — soft card with breathing room */
#consultationform .sidebar-help-wrap {
  margin: 0 0 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#consultationform p.sidebar-help {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  width: 100% !important;
  margin: 0 0 1rem !important;
  padding: 0.95rem 1.05rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: var(--cm-cf-muted) !important;
  text-align: left !important;
  background: var(--cm-cf-soft) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color) 10%, var(--cm-cf-border)) !important;
  border-radius: 0.85rem !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#consultationform p.sidebar-help i.fa,
#consultationform p.sidebar-help i.fa-question {
  flex-shrink: 0 !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  min-width: 1.65rem !important;
  min-height: 1.65rem !important;
  margin: 0.05rem 0 0 !important;
  border: 1.5px solid color-mix(in srgb, var(--primary-color) 35%, transparent) !important;
  border-radius: 9999px !important;
  color: var(--primary-color) !important;
  font-size: 0.7rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--primary-color) 8%, #ffffff) !important;
}

#consultationform p.sidebar-help > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cm-cf-muted) !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
}

#consultationform p.sidebar-help > span b,
#consultationform p.sidebar-help > span strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--dark-color) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#consultationform p.sidebar-help a:not(.contactus-sidebarlink) {
  color: var(--primary-color) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#consultationform p.sidebar-help a:not(.contactus-sidebarlink):hover {
  text-decoration: underline !important;
}

/* Inline "contact us" link — not a gradient pill */
#consultationform a.sidebar-button.contactus-sidebarlink,
#consultationform .contactus-sidebarlink,
#consultationform p.sidebar-help a.contactus-sidebarlink {
  display: inline !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  color: var(--primary-color) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  text-decoration: underline !important;
  text-transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  white-space: normal !important;
  vertical-align: baseline !important;
}

#consultationform a.sidebar-button.contactus-sidebarlink:hover,
#consultationform .contactus-sidebarlink:hover,
#consultationform p.sidebar-help a.contactus-sidebarlink:hover {
  background: none !important;
  background-image: none !important;
  color: var(--primary-hover) !important;
  text-decoration: underline !important;
}

/* Cancel assessment — separated from help */
#consultationform a.sidebar-cancle-assesment {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 40px !important;
  margin-top: 0.35rem !important;
  margin-left: 0 !important;
  padding: 0.55rem 1rem !important;
  border: 1.5px solid var(--secondary-color, #E8577A) !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  color: var(--secondary-color, #E8577A) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

#consultationform a.sidebar-cancle-assesment:hover {
  background: var(--dark-color) !important;
  border-color: var(--dark-color) !important;
  color: #ffffff !important;
}

/* Trust items in sidebar (multistep v2) */
#consultationform .sidebar-trust {
  display: grid !important;
  gap: 0.45rem !important;
  margin: 0 0 1rem !important;
  padding: 0.85rem 1rem !important;
  background: color-mix(in srgb, var(--primary-color) 6%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, var(--cm-cf-border)) !important;
  border-radius: 0.85rem !important;
}

#consultationform .sidebar-trust-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.45rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--cm-cf-text) !important;
}

#consultationform .sidebar-trust-item svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex-shrink: 0 !important;
  stroke: var(--primary-color) !important;
  margin-top: 0.1rem !important;
}

/* Agreement / nested list cards inside steps */
#consultationform .form-description-wrapper,
#consultationform .fields-content > .border,
#consultationform .acknowledge-box {
  border: 1px solid var(--cm-cf-border) !important;
  border-radius: var(--radius-md, 0.75rem) !important;
  background: #ffffff !important;
  padding: 1rem 1.1rem !important;
}

/* Welcome-back / reorder notice */
#recommend-notification .previous-consultation-message,
body.clearmed-consultation-page .previous-consultation-message {
  background: var(--cm-cf-card) !important;
  border: 1px solid var(--cm-cf-border) !important;
  border-radius: var(--cm-cf-radius) !important;
  padding: 1.35rem 1.5rem !important;
  box-shadow: var(--shadow-sm);
}

#recommend-notification .consultation-actions .btn,
#recommend-notification .consultation-actions .btn-primary,
body.clearmed-consultation-page .consultation-actions .btn-primary {
  background: var(--brand-gradient) !important;
  background-image: var(--brand-gradient) !important;
  border: none !important;
  border-radius: 9999px !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: var(--btn-padding-y, 0.5rem) var(--btn-padding-x, 1.35rem) !important;
}

/* Sticky sidebar on desktop */
@media (min-width: 992px) {
  #consultationform .form-sidebar,
  #consultationform .consult-sidebar {
    position: sticky !important;
    top: 6.5rem !important;
  }
}

@media (max-width: 991px) {
  #consultationform .cflp-form-container,
  #consultationform .cflp-form-container.row,
  #consultationform form.cflp-form .row,
  #consultationform .consult-grid {
    gap: 1.25rem !important;
  }

  #consultationform .cflp-form-container .form-content,
  #consultationform .form-content.col-md-8,
  #consultationform .form-content.col-md-9,
  #consultationform .form-sidebar,
  #consultationform .form-sidebar.col-md-3,
  #consultationform .form-sidebar.col-md-4,
  #consultationform .consult-sidebar {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #consultationform .form-group-wrapper,
  #consultationform .form-description-wrapper {
    padding: 1.35rem 1.25rem !important;
  }

  body.page-template-consultation h1.section-title {
    font-size: 1.5rem !important;
  }

  #consultationform .form-sidebar,
  #consultationform .consult-sidebar {
    margin-top: 0 !important;
  }

  #consultationform .form-sidebar .sidebarback {
    padding: 1.25rem 1.2rem !important;
  }

  #consultationform .form-group.form-input-group,
  #consultationform .fields-content > .form-group,
  form.cflp-form .form-group.form-input-group {
    padding: 1rem 1.05rem !important;
  }
}

@media (max-width: 575px) {
  #consultationform .form-check.radio,
  form.cflp-form .form-check.radio {
    flex: 1 1 100% !important;
  }

  body.page-template-consultation .page-content-section .container,
  body.page-template-consultation #consultationform .container,
  body.clearmed-consultation-page .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}