/* ==========================================================================
   Zoe Rose Studio - Enquiry flow
   Stylesheet for Fluent Forms Pro, multi-step guided enquiry
   --------------------------------------------------------------------------
   Written to match the Figma reference at
   https://www.figma.com/design/gddnLBqdKaCYX4MYNfqndS

   NOTES FOR WHOEVER INSTALLS THIS
   1. Set the four colour values and two font families in :root below.
      Pull them from Elementor's global colours rather than guessing.
      The values here are approximations taken from screenshots.
   2. Fluent Forms class names are stable but do occasionally shift between
      major versions. Verify the selectors against the rendered markup
      before assuming a rule is not applying.
   3. Everything is scoped under .zr-enquiry. Add that class to the form
      wrapper so this cannot leak into other forms on the site.
   4. Load this after Fluent Forms' own stylesheet.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.zr-enquiry {
  /* Colours, taken from Elementor Site Kit. These are the real values. */
  --zr-cream:        #F9F8F5;   /* page and screen background */
  --zr-black:        #000000;   /* type, borders, primary button */
  --zr-lime:         #E7F851;   /* Site Kit "NEON". Selected state, accents */
  --zr-white:        #FFFFFF;   /* card and input fill */

  /* Derived greys. These can usually stay as they are. */
  --zr-grey:         #737373;   /* sub lines, helper text, back link */
  --zr-grey-light:   #D1CFC7;   /* incomplete progress segments */
  --zr-placeholder:  #A6A6A6;   /* input placeholder */
  --zr-error:        #C4342B;   /* validation */

  /* Fonts, as used on the live site.
     Anton ships in a single weight (400). Do not apply font-weight to it,
     it does nothing and some browsers will synthesise an ugly faux bold.
     Anton also reads noticeably larger than a normal sans at the same px,
     so heading sizes here are pulled back from the Figma reference. */
  --zr-font-display: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  --zr-font-body:    'zr-sec', 'Self Modern', system-ui, sans-serif;

  /* Scale */
  --zr-radius-card:  14px;
  --zr-radius-input: 10px;
  --zr-radius-pill:  100px;
  --zr-border:       2px;

  --zr-gap-xs:  8px;
  --zr-gap-sm:  12px;
  --zr-gap-md:  24px;
  --zr-gap-lg:  36px;

  --zr-container: 1000px;
  --zr-pad:       64px;

  --zr-transition: 120ms ease-out;
}


/* ==========================================================================
   2. CONTAINER
   ========================================================================== */

/* Carry the enquiry cream across the full page content area while leaving the
   site header and footer styling alone. */
body.page-id-3740,
body.page-id-3740 #qodef-page-outer {
  background: #F9F8F5;
}

.zr-enquiry {
  max-width: var(--zr-container);
  margin: 0 auto;
  padding: 56px var(--zr-pad);
  background: var(--zr-cream);
  font-family: var(--zr-font-body);
  color: var(--zr-black);
  -webkit-font-smoothing: antialiased;
}

/* Fluent wraps each step; stop it adding its own spacing on top of ours. */
.zr-enquiry .ff-step-container,
.zr-enquiry .ff-step-body {
  padding: 0;
  margin: 0;
}


/* ==========================================================================
   3. PROGRESS BAR
   Fluent renders .ff-el-progress > .ff-el-progress-bar as a single filling
   bar. We override it to segments. If the markup differs, the fallback at
   the end of this block keeps a single bar looking correct.
   ========================================================================== */

.zr-enquiry .ff-el-progress-status {
  display: none;             /* Fluent's "33% complete" text */
}

.zr-enquiry .ff-el-progress {
  display: flex;
  gap: var(--zr-gap-xs);
  height: 5px;
  background: none;
  border-radius: 0;
  margin: 0 0 28px;
  overflow: visible;
}

.zr-enquiry .zr-progress-segment {
  flex: 1 1 0;
  height: 5px;
  border-radius: 2px;
  background: var(--zr-grey-light);
  transition: background var(--zr-transition);
}

.zr-enquiry .zr-progress-segment.is-complete {
  background: var(--zr-black);
}

/* Fallback if segments are not injected and Fluent's own bar renders. */
.zr-enquiry .ff-el-progress > .ff-el-progress-bar {
  height: 5px;
  border-radius: 2px;
  background: var(--zr-black);
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.zr-enquiry .zr-step-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--zr-grey);
  margin: 0 0 14px;
}

.zr-enquiry .zr-heading,
.zr-enquiry .ff-step-title {
  font-family: var(--zr-font-display);
  font-weight: 400;          /* Anton has one weight. Do not raise this. */
  font-size: 40px;           /* pulled back from 46 because Anton runs large */
  line-height: 44px;
  letter-spacing: 0.005em;   /* Anton is tight by default, this opens it up */
  color: var(--zr-black);
  margin: 0 0 10px;
  text-wrap: balance;
}

.zr-enquiry .zr-sub {
  font-size: 18px;
  line-height: 26px;
  color: var(--zr-grey);
  margin: 0 0 var(--zr-gap-lg);
}

.zr-enquiry .zr-body {
  font-size: 19px;
  line-height: 29px;
  color: var(--zr-black);
  margin: 0 0 14px;
}


/* ==========================================================================
   5. FIELD LABELS AND INPUTS
   ========================================================================== */

.zr-enquiry .ff-el-group {
  margin-bottom: var(--zr-gap-md);
}

.zr-enquiry .ff-el-input--label label {
  font-family: var(--zr-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zr-black);
  margin-bottom: 10px;
  display: block;
}

/* Fluent marks required fields with a red asterisk. Hide it and mark the
   optional ones in the label text instead, which is what the design does. */
.zr-enquiry .ff-el-is-required.asterisk-right label:after,
.zr-enquiry .ff-el-is-required.asterisk-left label:before {
  content: none;
}

.zr-enquiry input[type="text"].ff-el-form-control,
.zr-enquiry input[type="email"].ff-el-form-control,
.zr-enquiry input[type="tel"].ff-el-form-control,
.zr-enquiry input[type="url"].ff-el-form-control,
.zr-enquiry textarea.ff-el-form-control,
.zr-enquiry select.ff-el-form-control {
  width: 100%;
  background: var(--zr-white);
  border: var(--zr-border) solid var(--zr-black);
  border-radius: var(--zr-radius-input);
  padding: 18px 20px;
  font-family: var(--zr-font-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--zr-black);
  box-shadow: none;
  transition: border-color var(--zr-transition), box-shadow var(--zr-transition);
}

.zr-enquiry textarea.ff-el-form-control {
  min-height: 140px;
  resize: vertical;
}

.zr-enquiry .ff-el-form-control::placeholder {
  color: var(--zr-placeholder);
  opacity: 1;
}

.zr-enquiry .ff-el-form-control:hover {
  border-color: var(--zr-black);
  box-shadow: 0 0 0 1px var(--zr-black);
}

.zr-enquiry .ff-el-form-control:focus,
.zr-enquiry .ff-el-form-control:focus-visible {
  outline: none;
  border-color: var(--zr-black);
  box-shadow: 0 0 0 4px var(--zr-lime);
}

/* Helper text under a field */
.zr-enquiry .ff-el-help-message {
  font-size: 15px;
  line-height: 22px;
  color: var(--zr-grey);
  margin-top: 8px;
}


/* ==========================================================================
   6. OPTION CARDS
   Full width single-select cards. Screens 1, 2b, and returning client 1.
   The native input is hidden and the label becomes the card.
   Add .zr-cards to the ff-el-group wrapper.
   ========================================================================== */

.zr-enquiry .zr-cards .ff-el-form-check {
  display: block;
  margin: 0 0 var(--zr-gap-sm);
  padding: 0;
}

.zr-enquiry .zr-cards .ff-el-form-check:last-child {
  margin-bottom: 0;
}

.zr-enquiry .zr-cards input[type="radio"],
.zr-enquiry .zr-cards input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.zr-enquiry .zr-cards .ff-el-form-check-label {
  display: block;
  width: 100%;
  background: var(--zr-white);
  border: var(--zr-border) solid var(--zr-black);
  border-radius: var(--zr-radius-card);
  padding: 20px 26px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--zr-black);
  cursor: pointer;
  user-select: none;
  transition: background var(--zr-transition), transform var(--zr-transition);
}

/* Fluent nests a span inside the label; make sure it does not add its own
   indent for the now-hidden native control. */
.zr-enquiry .zr-cards .ff-el-form-check-label > span {
  padding-left: 0;
}

.zr-enquiry .zr-cards .ff-el-form-check-label:hover {
  background: color-mix(in srgb, var(--zr-lime) 25%, var(--zr-white));
}

.zr-enquiry .zr-cards input:focus-visible + .ff-el-form-check-label,
.zr-enquiry .zr-cards .ff-el-form-check-label:focus-within {
  outline: none;
  box-shadow: 0 0 0 4px var(--zr-lime);
}

.zr-enquiry .zr-cards input:checked + .ff-el-form-check-label,
.zr-enquiry .zr-cards .ff_item_selected .ff-el-form-check-label {
  background: var(--zr-lime);
  font-weight: 700;
}

.zr-enquiry .zr-cards .ff-el-form-check-label:active {
  transform: translateY(1px);
}


/* ==========================================================================
   7. CHIPS
   Wrapping multi-select. Screen 2a.
   Add .zr-chips to the ff-el-group wrapper.
   ========================================================================== */

.zr-enquiry .zr-chips .ff-el-input--content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zr-enquiry .zr-chips .ff-el-form-check {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.zr-enquiry .zr-chips input[type="checkbox"],
.zr-enquiry .zr-chips input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.zr-enquiry .zr-chips .ff-el-form-check-label {
  display: inline-block;
  background: var(--zr-white);
  border: var(--zr-border) solid var(--zr-black);
  border-radius: var(--zr-radius-pill);
  padding: 12px 20px;
  font-size: 17px;
  line-height: 1.2;
  color: var(--zr-black);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--zr-transition);
}

.zr-enquiry .zr-chips .ff-el-form-check-label:hover {
  background: color-mix(in srgb, var(--zr-lime) 25%, var(--zr-white));
}

.zr-enquiry .zr-chips input:checked + .ff-el-form-check-label,
.zr-enquiry .zr-chips .ff_item_selected .ff-el-form-check-label {
  background: var(--zr-lime);
  font-weight: 700;
}

.zr-enquiry .zr-chips input:focus-visible + .ff-el-form-check-label {
  outline: none;
  box-shadow: 0 0 0 4px var(--zr-lime);
}


/* ==========================================================================
   8. PILLS
   Inline single-select, slightly larger than chips. Screens 3 and 5.
   Add .zr-pills to the ff-el-group wrapper.
   ========================================================================== */

.zr-enquiry .zr-pills .ff-el-input--content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zr-enquiry .zr-pills .ff-el-form-check {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.zr-enquiry .zr-pills input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.zr-enquiry .zr-pills .ff-el-form-check-label {
  display: inline-block;
  background: var(--zr-white);
  border: var(--zr-border) solid var(--zr-black);
  border-radius: var(--zr-radius-pill);
  padding: 14px 24px;
  font-size: 17px;
  line-height: 1.2;
  color: var(--zr-black);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--zr-transition);
}

.zr-enquiry .zr-pills .ff-el-form-check-label:hover {
  background: color-mix(in srgb, var(--zr-lime) 25%, var(--zr-white));
}

.zr-enquiry .zr-pills input:checked + .ff-el-form-check-label,
.zr-enquiry .zr-pills .ff_item_selected .ff-el-form-check-label {
  background: var(--zr-lime);
  font-weight: 700;
}

.zr-enquiry .zr-pills input:focus-visible + .ff-el-form-check-label {
  outline: none;
  box-shadow: 0 0 0 4px var(--zr-lime);
}


/* ==========================================================================
   9. THE RECOMMENDATION CARD
   Screen 4. Rendered inside a Fluent custom HTML block.
   Deliberately matches the service cards on /our-services/.
   ========================================================================== */

.zr-enquiry .zr-reco {
  background: var(--zr-white);
  border: var(--zr-border) solid var(--zr-black);
  border-radius: 18px;
  overflow: hidden;
  margin: 32px 0 24px;
}

.zr-enquiry .zr-reco__head {
  background: var(--zr-lime);
  border-bottom: var(--zr-border) solid var(--zr-black);
  padding: 22px 30px;
}

.zr-enquiry .zr-reco__title {
  font-family: var(--zr-font-display);
  font-weight: 400;          /* Anton, single weight */
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--zr-black);
  margin: 0;
}

.zr-enquiry .zr-reco__body {
  padding: 28px 30px;
  font-size: 18px;
  line-height: 28px;
  color: var(--zr-black);
}

.zr-enquiry .zr-reco__body p:last-child {
  margin-bottom: 0;
}

.zr-enquiry .zr-reco-note {
  font-size: 17px;
  line-height: 26px;
  color: var(--zr-grey);
  margin: 0 0 var(--zr-gap-lg);
}


/* ==========================================================================
   10. BUTTONS AND THE NAV ROW
   ========================================================================== */

.zr-enquiry .ff-el-group.ff-text-left.ff_submit_btn_wrapper,
.zr-enquiry .step-nav,
.zr-enquiry .ff_submit_btn_wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

/* Push the primary button right, leave Back on the left. */
.zr-enquiry .step-nav .ff-btn-prev,
.zr-enquiry .ff-btn-prev {
  order: 1;
  margin-right: auto;
}

.zr-enquiry .step-nav .ff-btn-next,
.zr-enquiry .ff-btn-next,
.zr-enquiry .ff-btn-submit {
  order: 2;
  margin-left: auto;
}

/* Primary */
.ff-default .zr-enquiry .ff-btn-next.ff-btn-secondary,
.zr-enquiry .ff-btn-next,
.zr-enquiry .ff-btn-submit,
.zr-enquiry .zr-btn {
  background: var(--zr-black);
  color: var(--zr-white);
  border: var(--zr-border) solid var(--zr-black);
  border-radius: var(--zr-radius-pill);
  padding: 18px 38px;
  font-family: var(--zr-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--zr-transition), color var(--zr-transition),
              transform var(--zr-transition);
}

.ff-default .zr-enquiry .ff-btn-next.ff-btn-secondary:hover,
.ff-default .zr-enquiry .ff-btn-next.ff-btn-secondary:focus,
.zr-enquiry .ff-btn-next:hover,
.zr-enquiry .ff-btn-submit:hover,
.zr-enquiry .zr-btn:hover {
  background: var(--zr-lime);
  color: var(--zr-black);
}

.zr-enquiry .ff-btn-next:focus-visible,
.zr-enquiry .ff-btn-submit:focus-visible,
.zr-enquiry .zr-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--zr-lime), 0 0 0 6px var(--zr-black);
}

.zr-enquiry .ff-btn-next:active,
.zr-enquiry .ff-btn-submit:active {
  transform: translateY(1px);
}

.zr-enquiry .ff-btn-submit[disabled],
.zr-enquiry .ff-btn-next[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Back, as a plain text link rather than a button */
.ff-default .zr-enquiry .ff-btn-prev.ff-btn-secondary,
.zr-enquiry .ff-btn-prev {
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
  padding: 0;
  font-family: var(--zr-font-body);
  font-size: 17px;
  font-weight: 400;
  color: var(--zr-black);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--zr-transition);
}

.ff-default .zr-enquiry .ff-btn-prev.ff-btn-secondary:hover,
.ff-default .zr-enquiry .ff-btn-prev.ff-btn-secondary:focus,
.zr-enquiry .ff-btn-prev:hover {
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
  color: var(--zr-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zr-enquiry .ff-btn-prev:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--zr-lime);
  border-radius: 4px;
}

/* Secondary button, used on the returning-client branch */
.zr-enquiry .zr-btn--secondary {
  background: var(--zr-white);
  color: var(--zr-black);
}

.zr-enquiry .zr-btn--secondary:hover {
  background: var(--zr-lime);
}

/* Recommendation disagreement action. It is inserted beside the step-four
   primary button so Fluent can retain its native multi-step navigation. */
.zr-enquiry .zr-reco-nav .ff-btn-prev {
  order: 1;
  margin-right: auto;
}

.ff-default .zr-enquiry .zr-reco-nav .zr-btn.zr-reco-disagree {
  order: 2;
  margin-left: 0;
  background: transparent;
  color: var(--zr-black);
  border: var(--zr-border) solid var(--zr-black);
  box-shadow: none;
}

.ff-default .zr-enquiry .zr-reco-nav .zr-btn.zr-reco-disagree:hover,
.ff-default .zr-enquiry .zr-reco-nav .zr-btn.zr-reco-disagree:focus,
.ff-default .zr-enquiry .zr-reco-nav .zr-btn.zr-reco-disagree[aria-pressed="true"] {
  background: color-mix(in srgb, var(--zr-lime) 25%, var(--zr-white));
  color: var(--zr-black);
  border-color: var(--zr-black);
}

.ff-default .zr-enquiry .zr-reco-nav .ff-btn-next.ff-btn-secondary {
  order: 3;
  margin-left: 0;
}


/* ==========================================================================
   10A. SAVE AND CONTINUE
   Fluent gives the step controls its secondary-button class and generates the
   saved link and email controls after the form loads. The selectors below
   deliberately include those generated classes so the plugin's default grey
   button rules do not win the cascade.
   ========================================================================== */

.zr-enquiry .ff-el-group.ff-text-left.ff_submit_btn_wrapper.ff_submit_btn_wrapper_custom {
  border-top: 1px solid var(--zr-grey-light);
  gap: 0;
  margin-top: var(--zr-gap-lg);
  padding-top: var(--zr-gap-md);
}

.ff-default .zr-enquiry .ff-btn-save-progress.ff_btn_style,
.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > .ff-btn.ff_input-group-text,
.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group-append > .ff-btn.ff_input-group-text {
  background: var(--zr-black);
  color: var(--zr-white);
  border: var(--zr-border) solid var(--zr-black);
  border-radius: var(--zr-radius-pill);
  padding: 18px 38px;
  font-family: var(--zr-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  transition: background var(--zr-transition), color var(--zr-transition),
              transform var(--zr-transition);
}

.ff-default .zr-enquiry .ff-btn-save-progress.ff_btn_style:hover,
.ff-default .zr-enquiry .ff-btn-save-progress.ff_btn_style:focus,
.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > .ff-btn.ff_input-group-text:hover,
.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > .ff-btn.ff_input-group-text:focus,
.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group-append > .ff-btn.ff_input-group-text:hover,
.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group-append > .ff-btn.ff_input-group-text:focus {
  background: var(--zr-lime);
  border-color: var(--zr-black);
  color: var(--zr-black);
  opacity: 1;
}

.ff-default .zr-enquiry .ff-btn-save-progress.ff_btn_style:focus-visible,
.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > .ff-btn.ff_input-group-text:focus-visible,
.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group-append > .ff-btn.ff_input-group-text:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--zr-lime), 0 0 0 6px var(--zr-black);
}

.zr-enquiry .ff-saved-state-input {
  margin-top: var(--zr-gap-sm);
}

.zr-enquiry .ff-saved-state-input .ff_input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--zr-gap-sm);
}

.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > input.ff-el-form-control {
  flex: 1 1 0;
  width: 1%;
  min-width: 0;
  min-height: 64px;
  background: var(--zr-white);
  border: var(--zr-border) solid var(--zr-black);
  border-radius: var(--zr-radius-input);
  padding: 18px 20px;
  font-family: var(--zr-font-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--zr-black);
  box-shadow: none;
}

.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > .ff-btn.ff_input-group-text {
  flex: 0 0 auto;
}

.zr-enquiry .ff-saved-state-input .ff_input-group-append {
  display: flex;
  flex: 0 0 auto;
}

.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > input.ff-el-form-control:hover {
  border-color: var(--zr-black);
  box-shadow: 0 0 0 1px var(--zr-black);
}

.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > input.ff-el-form-control:focus,
.ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > input.ff-el-form-control:focus-visible {
  outline: none;
  border-color: var(--zr-black);
  box-shadow: 0 0 0 4px var(--zr-lime);
}

/* The native Save block is moved into each step's native navigation by the
   enquiry script. Keeping the wrapper intact preserves Fluent's save/resume
   event handling and where it inserts the generated link controls. */
.zr-enquiry .zr-action-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin-top: var(--zr-gap-lg);
  padding-top: var(--zr-gap-md);
  border-top: 1px solid var(--zr-grey-light);
}

.zr-enquiry .zr-action-row .ff-el-group.ff-text-left.ff_submit_btn_wrapper.ff_submit_btn_wrapper_custom,
.zr-enquiry .zr-action-row .ff_submit_btn_wrapper {
  display: block;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.zr-enquiry .zr-action-row .ff-btn-prev {
  order: 1;
  margin: 0 auto 0 0;
}

.zr-enquiry .zr-action-row .ff-el-group.ff-text-left.ff_submit_btn_wrapper.ff_submit_btn_wrapper_custom {
  order: 2;
  margin-left: auto;
}

.zr-enquiry .zr-action-row .zr-reco-disagree {
  order: 3;
}

.zr-enquiry .zr-action-row > .ff-btn-next,
.zr-enquiry .zr-action-row > .ff_submit_btn_wrapper:not(.ff_submit_btn_wrapper_custom) {
  order: 4;
  margin-left: 0;
}

.ff-default .zr-enquiry .zr-action-row .ff-btn-save-progress.ff_btn_style,
.ff-default .zr-enquiry .zr-action-row .ff-btn-save-progress.ff_btn_style:hover,
.ff-default .zr-enquiry .zr-action-row .ff-btn-save-progress.ff_btn_style:focus {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--zr-black);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--zr-font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: none;
}

.ff-default .zr-enquiry .zr-action-row .ff-btn-save-progress.ff_btn_style:focus-visible {
  outline: none;
  border-radius: 3px;
  box-shadow: 0 0 0 4px var(--zr-lime);
}

.zr-enquiry .zr-empty-native-submit-row {
  display: none;
}

/* Keep the theme's TOP control available while moving its hit area clear of
   page calls to action. */
body #qodef-back-to-top {
  right: 6px;
  bottom: 16px;
  width: 44px;
  height: 44px;
}

body #qodef-back-to-top .qodef-back-to-top-icon {
  width: 44px;
  height: 44px;
}


/* ==========================================================================
   11. FILE UPLOAD
   ========================================================================== */

.zr-enquiry .ff-el-input--content .ff_upload_btn,
.zr-enquiry .ff-upload-button {
  background: var(--zr-white);
  border: var(--zr-border) dashed var(--zr-black);
  border-radius: var(--zr-radius-input);
  padding: 22px;
  width: 100%;
  font-size: 17px;
  color: var(--zr-black);
  cursor: pointer;
  transition: background var(--zr-transition);
}

.zr-enquiry .ff-upload-button:hover {
  background: color-mix(in srgb, var(--zr-lime) 25%, var(--zr-white));
}

.zr-enquiry .ff-uploaded-list .ff-upload-preview {
  border: var(--zr-border) solid var(--zr-black);
  border-radius: var(--zr-radius-input);
  background: var(--zr-white);
}


/* ==========================================================================
   12. VALIDATION
   ========================================================================== */

.zr-enquiry .ff-el-is-error .ff-el-form-control {
  border-color: var(--zr-error);
}

.zr-enquiry .ff-el-is-error .ff-el-form-check-label {
  border-color: var(--zr-error);
}

.zr-enquiry .error.text-danger,
.zr-enquiry .ff-el-is-error .error {
  color: var(--zr-error);
  font-size: 15px;
  line-height: 22px;
  margin-top: 8px;
}

.zr-enquiry .ff-message-success {
  background: var(--zr-lime);
  border: var(--zr-border) solid var(--zr-black);
  border-radius: var(--zr-radius-card);
  padding: 28px 30px;
  color: var(--zr-black);
  font-size: 18px;
  line-height: 28px;
}


/* ==========================================================================
   13. MOBILE
   ========================================================================== */

@media (max-width: 782px) {
  .zr-enquiry {
    padding: 40px 24px;
  }

  .zr-enquiry .zr-heading,
  .zr-enquiry .ff-step-title {
    font-size: 29px;
    line-height: 33px;
  }

  .zr-enquiry .zr-sub {
    font-size: 17px;
    line-height: 25px;
  }

  .zr-enquiry .zr-body {
    font-size: 17px;
    line-height: 27px;
  }

  .zr-enquiry .zr-cards .ff-el-form-check-label {
    font-size: 17px;
    padding: 18px 20px;
  }

  .zr-enquiry .zr-chips .ff-el-form-check-label,
  .zr-enquiry .zr-pills .ff-el-form-check-label {
    font-size: 16px;
    padding: 11px 18px;
    white-space: normal;
  }

  .zr-enquiry .zr-reco__title {
    font-size: 21px;
  }

  .zr-enquiry .zr-reco__head,
  .zr-enquiry .zr-reco__body {
    padding: 20px 22px;
  }

  .zr-enquiry .ff-saved-state-input .ff_input-group {
    flex-direction: column;
    align-items: stretch;
  }

  .ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > .ff-btn.ff_input-group-text,
  .ff-default .zr-enquiry .ff-saved-state-input .ff_input-group-append > .ff-btn.ff_input-group-text {
    width: 100%;
    text-align: center;
    padding: 20px 24px;
  }

  .ff-default .zr-enquiry .ff-saved-state-input .ff_input-group > input.ff-el-form-control {
    flex-basis: auto;
    width: 100%;
  }

  .zr-enquiry .ff-saved-state-input .ff_input-group-append {
    width: 100%;
  }

}

@media (max-width: 600px) {
  .zr-enquiry .zr-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 18px 16px;
  }

  .zr-enquiry .zr-action-row .ff-btn-prev {
    grid-column: 1;
    justify-self: start;
    margin: 0;
    padding: 6px 0;
    text-align: left;
  }

  .zr-enquiry .zr-action-row .ff-el-group.ff-text-left.ff_submit_btn_wrapper.ff_submit_btn_wrapper_custom {
    grid-column: 2;
    justify-self: end;
    margin: 0;
    text-align: right;
  }

  .zr-enquiry .zr-action-row .zr-reco-disagree,
  .zr-enquiry .zr-action-row > .ff-btn-next,
  .zr-enquiry .zr-action-row > .ff_submit_btn_wrapper:not(.ff_submit_btn_wrapper_custom) {
    grid-column: 1 / -1;
    width: 100%;
  }

  .zr-enquiry .zr-action-row > .ff-btn-next,
  .zr-enquiry .zr-action-row > .ff_submit_btn_wrapper:not(.ff_submit_btn_wrapper_custom) .ff-btn-submit {
    width: 100%;
    padding: 20px 24px;
    text-align: center;
  }
}


/* ==========================================================================
   14. ACCESSIBILITY AND MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .zr-enquiry *,
  .zr-enquiry *::before,
  .zr-enquiry *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Visible focus for anyone tabbing through, without showing rings on click */
.zr-enquiry :focus:not(:focus-visible) {
  outline: none;
}

/* Screen reader only, for the hidden step announcements */
.zr-enquiry .zr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}