/* Consultation overlay (#whd-consult, product-archive template) over Gravity Forms' gravity-theme markup. */

/* --- Shell ----------------------------------------------------------------- */

#whd-consult {
  --consult-gutter: var(--space-md);
  --consult-control: 1.25rem;
  --consult-choice-inset: calc(var(--space-md) + var(--consult-control) + var(--space-sm));
  --consult-column: 40rem;

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--text-body);
  font-family: var(--font-family-body);
}

/* Over the kit's and Elementor's per-widget font families. */
#whd-consult :is(h1, h2, h3, h4, p, li, label, legend, input, select, textarea, button) {
  font-family: var(--font-family-body);
}

/* style.css forces a permanent scrollbar. */
#whd-consult .consultationforminner {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

@media (max-width: 47.999rem) {
  #whd-consult .consultationforminner {
    min-block-size: 100dvh;
  }
}

/* Desktop: the panel grows and the backdrop scrolls, so the scrollbar sits at the window edge. */
@media (min-width: 48rem) {
  #whd-consult {
    --consult-gutter: 2rem;

    padding-block: 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-base-2) transparent;
  }

  #whd-consult > .e-con-inner {
    block-size: auto;
    min-block-size: 100%;
  }

  #whd-consult .consultationforminner {
    flex-shrink: 0;
    max-inline-size: calc(var(--consult-column) + 2 * var(--consult-gutter));
    block-size: auto;
    min-block-size: auto;
    margin-inline: auto;
    /* Clips the header's 10px Elementor corners to this radius without scrolling. */
    overflow: clip !important;
    border-radius: var(--radius-md);
  }
}

/* Over the shortcode widget's negative margin, which tucks the error summary under the header. */
#whd-consult .elementor-widget-shortcode > .elementor-widget-container {
  margin-block-start: 0;
}

/* --- Header ---------------------------------------------------------------- */

#whd-consult .consultation-form-heading .elementor-heading-title {
  color: var(--text-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
}

#whd-consult .whd-consult__intro {
  margin-block-start: var(--space-xs);
  color: var(--text-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

#whd-consult .whd-consult__intro p {
  margin: 0;
}

#whd-consult .whd-consult__time {
  margin-block-start: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
}

/* Intro and time only on the first step, and not over the confirmation. */
#whd-consult:has(.gform_body > .gform_page:first-child[style*="none"], .gform_confirmation_wrapper)
  :is(.whd-consult__intro, .whd-consult__time) {
  display: none;
}

#whd-consult .whd-consult__close .elementor-icon-wrapper {
  display: flex;
  justify-content: flex-end;
}

/* Same X as the header menu toggle, whatever icon the Elementor widget holds. */
#whd-consult .whd-consult__close .elementor-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-heading);
  cursor: pointer;
  transition: background-color var(--transition);
}

#whd-consult .whd-consult__close .elementor-icon svg {
  display: none;
}

#whd-consult .whd-consult__close .elementor-icon::before {
  content: "";
  inline-size: 1.5rem;
  block-size: 1.5rem;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
  #whd-consult .whd-consult__close .elementor-icon:hover {
    background-color: var(--surface-soft);
  }
}

@media (forced-colors: active) {
  #whd-consult .whd-consult__close .elementor-icon::before {
    background-color: CanvasText;
    forced-color-adjust: none;
  }
}

/* --- Form frame ------------------------------------------------------------ */

#whd-consult .gform_wrapper.gravity-theme {
  margin: 0;
  font-size: var(--font-size-base);
}

#whd-consult .gform_wrapper.gravity-theme .gform_heading:not(:has(.gform_title, .gform_description:not(:empty))) {
  display: none;
}

#whd-consult .gform_wrapper.gravity-theme .gform-body.gform_body {
  padding: 0 var(--consult-gutter);
}

#whd-consult .gform_wrapper.gravity-theme .gform_fields {
  column-gap: var(--space-sm);
  row-gap: var(--space-lg);
  max-inline-size: var(--consult-column);
}

@media (min-width: 48rem) {
  #whd-consult .gform_wrapper.gravity-theme .gform_fields {
    row-gap: var(--space-xl);
  }
}

#whd-consult .gform_wrapper.gravity-theme .gfield {
  margin: 0;
  padding: 0;
}

/* Hidden without display: none, so Gravity still treats the BMI calc fields as shown. */
#whd-consult .gform_wrapper.gravity-theme :is(.bmi-field, .bmi-field2) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Progress -------------------------------------------------------------- */

#whd-consult .gform_wrapper.gravity-theme .gf_progressbar_wrapper {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--consult-gutter) 0;
}

#whd-consult .gform_wrapper.gravity-theme .gf_progressbar_title {
  display: block;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
}

/* Focused by consult.js for screen readers; not a control. */
#whd-consult .gform_wrapper.gravity-theme .gf_progressbar_title:focus {
  outline: none;
}

/* style.css squares and recolours the bar with !important. */
#whd-consult .gform_wrapper.gravity-theme .gf_progressbar {
  block-size: 0.375rem;
  margin: var(--space-xs) 0 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-btn) !important;
  background: var(--surface-sunken) !important;
  box-shadow: none;
}

#whd-consult .gform_wrapper.gravity-theme .gf_progressbar_percentage {
  block-size: 100%;
  border-radius: inherit !important;
  background-color: var(--color-contrast-1) !important;
  transition: width var(--transition-slow);
}

#whd-consult .gform_wrapper.gravity-theme .gf_progressbar_percentage span {
  display: none;
}

/* Forced colours would paint track and fill alike. */
@media (forced-colors: active) {
  #whd-consult .gform_wrapper.gravity-theme .gf_progressbar {
    border: 1px solid CanvasText;
  }

  #whd-consult .gform_wrapper.gravity-theme .gf_progressbar_percentage {
    background-color: Highlight !important;
    forced-color-adjust: none;
  }
}

/* --- Questions and hints --------------------------------------------------- */

/* style.css sets the size and bottom margin with !important. */
#whd-consult .gform_wrapper.gravity-theme .gfield_label {
  display: block;
  margin: 0 0 var(--space-sm) !important;
  padding: 0;
  color: var(--text-heading);
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
}

/* Every question is required; screen readers still hear it. */
#whd-consult .gform_wrapper.gravity-theme .gfield_label .gfield_required {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_description:not(.validation_message, .gfield_consent_description) {
  margin: calc(-1 * var(--space-2xs)) 0 var(--space-sm) !important;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--font-size-base) !important;
  font-style: normal;
  line-height: var(--line-height-base);
}

#whd-consult .gform_wrapper.gravity-theme .field_description_below .gfield_description:not(.validation_message, .gfield_consent_description) {
  margin: var(--space-xs) 0 0 !important;
}

/* Inline italics typed into the hint field. */
#whd-consult .gform_wrapper.gravity-theme .gfield_description [style*="italic"] {
  font-style: normal !important;
}

#whd-consult .gform_wrapper.gravity-theme .gfield--type-checkbox.gfield--no-description > .gfield_label::after {
  content: "Select all that apply";
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--text-muted);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
}

/* --- Choice cards ---------------------------------------------------------- */

#whd-consult .gform_wrapper.gravity-theme :is(.gfield_radio, .gfield_checkbox) {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-inline-size: var(--consult-column);
  margin: 0;
  padding: 0;
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent) {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 1.5px solid color-mix(in oklch, var(--color-contrast-2) 40%, transparent);
  border-radius: var(--radius-sm);
  background-color: var(--surface-card);
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

/* The label is the hit area; the input is drawn over its start padding. */
#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent) > input:is([type="radio"], [type="checkbox"]) {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-md);
  translate: 0 -50%;
  inline-size: var(--consult-control);
  block-size: var(--consult-control);
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--border-control);
  border-radius: 50%;
  background: var(--surface-card) no-repeat center / 0.8rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent) > input[type="checkbox"] {
  border-radius: 0.375rem;
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent) > input:checked {
  border-color: var(--color-contrast-1);
  background-color: var(--color-contrast-1);
}

#whd-consult .gform_wrapper.gravity-theme .gchoice > input[type="radio"]:checked {
  box-shadow: inset 0 0 0 3px var(--surface-card);
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent) > input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
}

/* Over Gravity's inline-block label capped at calc(100% - 32px); style.css sets size with !important. */
#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent) > label {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 3rem;
  margin: 0;
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--consult-choice-inset);
  border-radius: 0;
  background: none;
  color: var(--text-body);
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  text-align: start;
  white-space: normal;
  text-wrap: pretty;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

@media (hover: hover) {
  #whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent):hover {
    border-color: var(--border-accent);
    background-color: color-mix(in oklab, var(--surface-soft) 50%, var(--surface-card));
  }

  #whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent):hover > input:not(:checked) {
    border-color: var(--border-accent);
  }
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent):active {
  background-color: var(--surface-soft);
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent):has(> input:checked) {
  border-color: var(--border-strong);
  background-color: var(--surface-soft);
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent):has(> input:checked) > label {
  color: var(--text-heading);
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent):has(> input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent):has(> input:disabled) {
  opacity: 0.55;
}

#whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent):has(> input:disabled) > label {
  cursor: default;
}

/* Two choices sit side by side; a pair too long for one row stacks. */
#whd-consult .gform_wrapper.gravity-theme .gfield_radio:has(> .gchoice:nth-child(2):last-child) {
  flex-direction: row;
  flex-wrap: wrap;
  max-inline-size: 28rem;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_radio:has(> .gchoice:nth-child(2):last-child) > .gchoice {
  flex: 1 1 0;
  min-inline-size: fit-content;
}

/* Short options: Custom CSS Class set on the Gravity field. */
#whd-consult .gform_wrapper.gravity-theme .whd-choices--inline :is(.gfield_radio, .gfield_checkbox) {
  --consult-choice-inset: calc(var(--space-sm) + var(--consult-control) + var(--space-xs));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  max-inline-size: 28rem;
}

#whd-consult .gform_wrapper.gravity-theme .whd-choices--inline .gchoice > input {
  inset-inline-start: var(--space-sm);
}

#whd-consult .gform_wrapper.gravity-theme .whd-choices--inline .gchoice > label {
  padding-inline-end: var(--space-sm);
}

/* TODO: drop once forms 177/224 lose their units-toggle <style> (hides radios, pads labels !important). */
#whd-consult .gform_wrapper.gravity-theme .c2punit-toggle .gchoice > input {
  display: block !important;
}

#whd-consult .gform_wrapper.gravity-theme .c2punit-toggle .gchoice > label {
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--consult-choice-inset) !important;
}

/* The exclusive option sits apart. Matched by value: many fields lack the gw-none-of-the-above class. */
#whd-consult .gform_wrapper.gravity-theme :is(.gfield_radio, .gfield_checkbox) > .gchoice:last-child:nth-child(n + 3):has(> input[value^="none" i]) {
  margin-block-start: var(--space-md);
}

/* Custom drawing vanishes under forced colours; the native control does not. */
@media (forced-colors: active) {
  #whd-consult .gform_wrapper.gravity-theme :is(.gchoice, .ginput_container_consent) > input:is([type="radio"], [type="checkbox"]) {
    appearance: auto;
    -webkit-appearance: auto;
  }
}

/* --- Consent --------------------------------------------------------------- */

/* style.css sets size and border with !important. */
#whd-consult .gform_wrapper.gravity-theme .gfield_consent_description {
  max-block-size: none !important;
  margin: 0 0 var(--space-sm) !important;
  padding: var(--space-md);
  overflow: visible !important;
  border: 0 !important;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--text-body);
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-base);
}

/* Gravity 3.x boxes and scrolls this inner block at 240px. */
#whd-consult .gform_wrapper.gravity-theme .gfield_consent_description_text {
  box-sizing: border-box;
  inline-size: auto;
  max-block-size: none;
  margin: 0;
  padding: 0 0 0 1.25em;
  overflow: visible;
  border: 0;
  font-size: inherit;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_consent_description_text:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_consent_description li {
  margin: 0 0 var(--space-xs);
  padding-inline-start: 0.25em;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_consent_description li:last-child {
  margin-block-end: 0;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_consent_description li::marker {
  color: var(--accent);
}

#whd-consult .gform_wrapper.gravity-theme .ginput_container_consent {
  max-inline-size: var(--consult-column);
}

#whd-consult .gform_wrapper.gravity-theme .ginput_container_consent > label {
  font-weight: var(--font-weight-medium);
}

/* --- Text fields, selects, date -------------------------------------------- */

#whd-consult .gform_wrapper.gravity-theme .gfield :is(input:not([type="radio"], [type="checkbox"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 3rem;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-sm);
  background-color: var(--surface-card);
  box-shadow: none;
  color: var(--text-body);
  font-size: max(16px, var(--font-size-base));
  line-height: var(--line-height-base);
  transition: border-color var(--transition);
}

#whd-consult .gform_wrapper.gravity-theme .gfield textarea {
  min-block-size: 7rem;
}

#whd-consult .gform_wrapper.gravity-theme .gfield select {
  max-inline-size: 24rem;
  padding-inline-end: calc(var(--space-md) + 1.25rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23033F85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 1rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

@media (hover: hover) {
  #whd-consult .gform_wrapper.gravity-theme .gfield :is(input:not([type="radio"], [type="checkbox"], [type="hidden"]), select, textarea):hover {
    border-color: var(--border-accent);
  }
}

#whd-consult .gform_wrapper.gravity-theme .gfield :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#whd-consult .gform_wrapper.gravity-theme .gfield input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

@media (forced-colors: active) {
  #whd-consult .gform_wrapper.gravity-theme .gfield select {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
  }
}

#whd-consult .gform_wrapper.gravity-theme .gfield--type-date .ginput_complex {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  margin: 0;
}

#whd-consult .gform_wrapper.gravity-theme .gfield--type-date .ginput_container_date {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 4.75rem;
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

#whd-consult .gform_wrapper.gravity-theme .gfield--type-date .gfield_date_year {
  flex-basis: 6.5rem;
}

/* Gravity renders the Day / Month / Year labels screen-reader only; Hello positions those with !important. */
#whd-consult .gform_wrapper.gravity-theme .gfield--type-date .ginput_container_date > label.screen-reader-text {
  position: static !important;
  inline-size: auto;
  block-size: auto;
  margin: 0 0 var(--space-2xs);
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
}

#whd-consult .gform_wrapper.gravity-theme input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#whd-consult .gform_wrapper.gravity-theme input[type="number"]::-webkit-inner-spin-button,
#whd-consult .gform_wrapper.gravity-theme input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* --- Errors ---------------------------------------------------------------- */

/* style.css hides the summary; Gravity moves focus to it. */
#whd-consult .gform_wrapper.gravity-theme .gform_validation_errors {
  display: block;
  box-sizing: border-box;
  inline-size: auto;
  margin: var(--space-md) var(--consult-gutter) 0;
  padding: var(--space-sm) var(--space-md);
  max-inline-size: var(--consult-column);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--status-critical-surface);
  box-shadow: none;
}

/* Gravity focuses it after a failed Next. */
#whd-consult .gform_wrapper.gravity-theme .gform_validation_errors:focus {
  outline: none;
}

#whd-consult .gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error {
  margin: 0;
  color: var(--status-critical);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

#whd-consult .gform_wrapper.gravity-theme .gform_validation_errors .gform-icon {
  display: none;
}

/* style.css boxes the message in orange, then red, all !important. */
#whd-consult .gform_wrapper.gravity-theme .gfield_validation_message {
  max-inline-size: none;
  margin: var(--space-xs) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  color: var(--status-critical) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

#whd-consult .gform_wrapper.gravity-theme .gfield_error {
  border: 0;
  background: none;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_error :is(.gchoice, .ginput_container_consent):not(:has(> input:checked)) {
  border-color: var(--status-critical);
}

/* style.css turns error labels and fields black with !important. */
#whd-consult .gform_wrapper.gravity-theme .gfield_error .gfield_label {
  color: var(--text-heading) !important;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_error :is(.gchoice, .ginput_container_consent) > label {
  color: var(--text-body) !important;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_error :is(.gchoice, .ginput_container_consent):has(> input:checked) > label {
  color: var(--text-heading) !important;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_error .ginput_container_date > label {
  color: var(--text-muted) !important;
}

#whd-consult .gform_wrapper.gravity-theme .gfield_error :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--status-critical) !important;
  color: var(--text-body) !important;
}

/* --- Step buttons ---------------------------------------------------------- */

#whd-consult .gform_wrapper.gravity-theme .gform_page_footer {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  max-inline-size: var(--consult-column);
  margin: var(--space-xl) 0 0;
  padding: 0 0 var(--space-lg);
  border: 0;
}

#whd-consult .gform_wrapper.gravity-theme .gform_page_footer:not(:has(.gform_previous_button)) {
  grid-template-columns: 1fr;
}

/* style.css and the kit colour every .button, partly !important. */
#whd-consult .gform_wrapper.gravity-theme .gform_page_footer :is(.gform_next_button, .gform_previous_button, .gform_button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  inline-size: auto;
  min-block-size: 3rem;
  margin: 0 !important;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-btn);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

#whd-consult .gform_wrapper.gravity-theme .gform_page_footer :is(.gform_next_button, .gform_button) {
  border: 1.5px solid var(--action-primary) !important;
  background-color: var(--action-primary) !important;
  color: var(--action-primary-text) !important;
}

#whd-consult .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button {
  border: 1.5px solid var(--border-strong) !important;
  background-color: transparent !important;
  color: var(--text-heading) !important;
}

@media (hover: hover) {
  #whd-consult .gform_wrapper.gravity-theme .gform_page_footer :is(.gform_next_button, .gform_previous_button, .gform_button):hover {
    border-color: var(--action-hover) !important;
    background-color: var(--action-hover) !important;
    color: var(--action-hover-text) !important;
  }
}

#whd-consult .gform_wrapper.gravity-theme .gform_page_footer :is(.gform_next_button, .gform_previous_button, .gform_button):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#whd-consult .gform_wrapper.gravity-theme .gform_page_footer :is(.gform_next_button, .gform_previous_button)::after {
  content: "";
  flex: none;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  background-color: currentColor;
  mask: url("../img/arrow-forward-sm.svg") center / contain no-repeat;
}

#whd-consult .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button::after {
  order: -1;
  rotate: 180deg;
}

#whd-consult .gform_wrapper.gravity-theme .gform_page_footer :is(.gform-loader, .gform_ajax_spinner) {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: var(--space-md);
}

/* Desktop: Next keeps one size and spot on every step. */
@media (min-width: 48rem) {
  #whd-consult .gform_wrapper.gravity-theme .gform_page_footer :is(.gform_next_button, .gform_button) {
    justify-self: end;
    inline-size: 15rem;
  }
}

/* Form 1 (legacy markup, single page): its footer sits outside the padded body. */
#whd-consult .gform_legacy_markup_wrapper .gform_footer {
  padding-inline: var(--consult-gutter);
}

/* --- Callouts (HTML fields) ------------------------------------------------ */

#whd-consult .whd-callout {
  margin: 0;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

#whd-consult .whd-callout > :first-child {
  margin-block-start: 0;
}

#whd-consult .whd-callout > :last-child {
  margin-block-end: 0;
}

#whd-consult .whd-callout--positive {
  background: var(--status-positive-surface);
}

#whd-consult .whd-callout--caution {
  background: var(--status-caution-surface);
}

#whd-consult .whd-callout strong {
  color: var(--text-heading);
}

#whd-consult .whd-callout--positive strong {
  color: var(--status-positive);
}

@media (prefers-reduced-motion: reduce) {
  #whd-consult .gform_wrapper.gravity-theme .gf_progressbar_percentage {
    transition: none;
  }
}