/* =============================================================
   Treats for Troops Candy Map Registration (Gravity Form 136)
   Scoped custom CSS, v6 (Mat, 15 Sep). Lives in the sa-treats-for-troops
   plugin and is enqueued by includes/class-form-styles.php only on requests
   that render a form whose CSS class contains "satft-form".

   ---------------------------------------------------------------
   SETUP, REQUIRED. Nothing in this file applies until the class
   exists on the form.

   Gravity Forms admin > Forms > Treats for Troops Candy Map
   Registration > Settings > Form Layout (older builds call this
   Appearance) > CSS Class Name. Enter:

       satft-form

   GF prints that on the <form> element. Everything below hangs
   off it, so this file is inert on every other form on the site
   and can be loaded globally without risk.
   ---------------------------------------------------------------

   Load AFTER gravity-theme.min.css.

   Why the class is doubled in every selector: .satft-form.satft-form
   scores the same specificity as a second class without needing a
   second class in the markup, which puts these rules level with
   gravity-theme's own two-class selectors. Level plus loading
   later means these win. It is a deliberate hack, not a typo.

   Field-level selectors (#field_136_22 and friends) carry the
   form id. If this form is duplicated for the 2027 season, GF
   keeps the field numbers and changes the form id, so a
   find-and-replace of _136_ for the new id is all that is needed.

   v6 adds: class scoping in place of the wrapper id, and a
   readable button loading state.

   v5 adds: validation alert no longer overflows the card.

   v4 adds: quieter validation alert with space beneath it, and
   a page-level background-position rule at the bottom.

   v3 adds: First / Last inputs aligned with the rest of the
   fields (gravity-theme was padding the grid columns).

   v2 changes:
   - step number optically centred in its circle
   - .satft-step__pages supports is-done as well as is-complete
   - validation error summary rewritten against the real markup
   - section rules no longer depend on :first-child (this was
     putting a stray divider above the first heading on the
     private branch and on page 1)
   - phantom grid rows removed (the geocoder field was taking up
     a row because GF hides it with visibility, not display)
   - footer button margins: the shorthand reset was outranking
     margin-left:auto, so a lone Next button sat on the left
   - field margins normalised

   DO NOT add display rules to .gfield wrappers. Conditional
   logic hides the inactive branch with inline display:none, and
   an !important display rule would reveal it.
   ============================================================= */

.satft-form.satft-form {
  /* ---- palette ---------------------------------------------- */
  --satft-navy: #1b3b5f;
  --satft-navy-deep: #102941;
  --satft-navy-tint: #eaf0f6;
  --satft-red: #963338;
  --satft-gold: #8a6a15;
  --satft-gold-bright: #b5912b;
  --satft-ink: #23262b;
  --satft-muted: #5c6570;
  --satft-line: #d6d7d2;
  --satft-line-soft: #e8e8e4;
  --satft-ok: #2e6b4f;
  --satft-error: #a3231f;
  --satft-paper: #fff;
  --satft-radius: 3px;

  /* ---- shell ------------------------------------------------ */
  background: var(--satft-paper);
  border: 1px solid var(--satft-line);
  border-radius: var(--satft-radius);
  box-shadow: 0 1px 2px rgba(16, 41, 65, .06), 0 8px 24px rgba(16, 41, 65, .07);
  padding: 0;
  margin-top: 0;
  color: var(--satft-ink);
}

/* ---- things that should take up no space at all -------------
   GF hides the geocoder field and some others with visibility
   or off-screen positioning, which still reserves a grid row.
   display:none does not stop these inputs from submitting;
   only the disabled attribute does, and GF manages that. */
.satft-form.satft-form .gform_validation_container,
.satft-form.satft-form #field_136_51,
.satft-form.satft-form .gfield_visibility_hidden,
.satft-form.satft-form #field_136_12,
.satft-form.satft-form .gform_hidden,
.satft-form.satft-form .gf_progressbar_wrapper,
.satft-form.satft-form .gf_page_steps {
  display: none !important;
}


/* =============================================================
   1. STEP TRACKER  (.satft-steps)
   ============================================================= */

.satft-form.satft-form .satft-steps {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--satft-line-soft);
  background: #fcfcfb;
  border-radius: var(--satft-radius) var(--satft-radius) 0 0;
}

.satft-form.satft-form .satft-steps ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.satft-form.satft-form .satft-steps ol li::before,
.satft-form.satft-form .satft-steps ol li::marker {
  content: none;
}

.satft-form.satft-form .satft-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.25;
  color: var(--satft-muted);
}

.satft-form.satft-form .satft-step + .satft-step::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 1px;
  height: 22px;
  background: var(--satft-line-soft);
}

/* Digits sit on the baseline with empty descender space below,
   so centring the line box makes them read high. Flex centring
   plus line-height:1 and a 1px optical nudge fixes it. */
.satft-form.satft-form .satft-step__num {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 1px 0 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-indent: 0;
  background: #fff;
  border: 1.5px solid var(--satft-line);
  color: var(--satft-muted);
}

.satft-form.satft-form .satft-step__label {
  grid-column: 2;
  padding-top: 3px;
}

.satft-form.satft-form .satft-step--current { color: var(--satft-ink); }
.satft-form.satft-form .satft-step--current .satft-step__num {
  background: var(--satft-navy);
  border-color: var(--satft-navy);
  color: #fff;
}
.satft-form.satft-form .satft-step--current .satft-step__label { font-weight: 700; }

.satft-form.satft-form .satft-step--complete .satft-step__num,
.satft-form.satft-form .satft-step--done .satft-step__num {
  background: var(--satft-ok);
  border-color: var(--satft-ok);
  color: #fff;
}

/* page dots inside the current step */
.satft-form.satft-form .satft-step__pages {
  grid-column: 2;
  display: flex;
  gap: 4px;
  margin-top: 9px;
  max-width: 130px;
}
.satft-form.satft-form .satft-step__pages i {
  display: block;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--satft-line-soft);
}
.satft-form.satft-form .satft-step__pages i.is-current { background: var(--satft-gold-bright); }
.satft-form.satft-form .satft-step__pages i.is-done,
.satft-form.satft-form .satft-step__pages i.is-complete { background: var(--satft-navy); }

.satft-form.satft-form .satft-steps__note {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--satft-muted);
  max-width: 62ch;
  text-align: left;
}


/* =============================================================
   2. VALIDATION SUMMARY
   Real markup:
   .gform_validation_errors > h2.gform_submission_error.hide_summary
     > span.gform-icon.gform-icon--circle-error
   gravity-theme positions that icon absolutely against padding
   on the container. Flex is steadier.
   ============================================================= */

.satft-form.satft-form .gform_validation_errors,
.gform_wrapper:has(.satft-form) > .gform_validation_errors {
  position: static;
  box-sizing: border-box;
  /* gravity-theme sets width:100% on this container. With left
     and right margins that makes it 44px wider than the card and
     it spills out the right edge. */
  width: auto;
  max-width: 100%;
  border: 1px solid #d9a7a4;
  border-radius: 3px;
  background: #fdf3f2;
  box-shadow: none;
  outline: none;
  margin: 20px 22px;
  padding: 13px 15px;
  scroll-margin-top: 90px;
}

.satft-form.satft-form .gform_validation_errors > h2 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: static;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--satft-error);
  text-transform: none;
  letter-spacing: 0;
}

.satft-form.satft-form .gform_validation_errors > h2 .gform-icon {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  top: auto;
  left: auto;
  right: auto;
  font-size: 17px;
  line-height: 1.3;
  color: var(--satft-error);
}

/* GF autofocuses this container with tabindex="-1", which draws a
   second ring around the border in some browsers. Suppressed for
   mouse focus, kept for keyboard. */
.satft-form.satft-form .gform_validation_errors:focus { outline: none; }
.satft-form.satft-form .gform_validation_errors:focus-visible {
  outline: 3px solid #2f6fb2;
  outline-offset: 2px;
}


/* =============================================================
   3. PAGE BODY, GRID, SECTIONS
   ============================================================= */

.satft-form.satft-form .gform_page_fields {
  padding: 24px 22px 4px;
}

.satft-form.satft-form .gform_fields {
  grid-row-gap: 20px;
  grid-column-gap: 3%;
}

/* normalise field spacing so the grid gap is the only spacer */
.satft-form.satft-form .gfield:not(.gfield--type-consent) {
  margin: 0;
  padding: 0;
}
.satft-form.satft-form .ginput_container {
  margin: 0;
}
.satft-form.satft-form .gform_fields input,
.satft-form.satft-form .gform_fields select {
  margin-bottom: 0;
}

/* --- section headers ---
   :first-child is unreliable here: the honeypot is the first
   child on page 1, and on the private branch every public field
   above the heading is display:none but still an earlier
   sibling. So the first heading of each branch is named by ID
   instead, and only genuinely mid-page headings get a divider. */
.satft-form.satft-form .gsection {
  border-bottom: none;
  border-top: 1px solid var(--satft-line-soft);
  margin: 6px 0 0;
  padding: 18px 0 0;
}

.satft-form.satft-form #field_136_22,   /* Your collection site, page 1 */
.satft-form.satft-form #field_136_4,    /* Public Collection Site Registration */
.satft-form.satft-form #field_136_16,   /* Private Collection Site Registration */
.satft-form.satft-form #field_136_23,   /* Before You Complete Your Registration */
.satft-form.satft-form #field_136_41 {  /* Consent to Participate */
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.satft-form.satft-form .gsection_title {
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--satft-navy);
  margin: 0;
}
.satft-form.satft-form .gsection_description {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--satft-muted);
  max-width: 62ch;
  margin: 6px 0 0;
  padding: 0;
}

/* the "WILL SHOW ON THE PUBLIC MAP" note as a callout */
.satft-form.satft-form #field_136_4 .gsection_description {
  margin-top: 14px;
  padding: 13px 15px;
  background: #fbf4e2;
  border-left: 3px solid var(--satft-gold-bright);
  color: var(--satft-ink);
  max-width: none;
}


/* =============================================================
   4. LABELS, INPUTS, HELP TEXT
   ============================================================= */

.satft-form.satft-form .gfield_label,
.satft-form.satft-form .gform-field-label {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--satft-ink);
  margin-bottom: 6px;
}

.satft-form.satft-form .gfield_required,
.satft-form.satft-form .gfield_required_text {
  color: var(--satft-muted);
  font-weight: 400;
  font-size: 12.5px;
  font-style: normal;
}

.satft-form.satft-form .gfield_description,
.satft-form.satft-form .ginput_counter {
  font-size: 13px;
  line-height: 1.45;
  color: var(--satft-muted);
  padding-top: 6px;
  max-width: 62ch;
}

.satft-form.satft-form input[type=text],
.satft-form.satft-form input[type=email],
.satft-form.satft-form input[type=tel],
.satft-form.satft-form input[type=url],
.satft-form.satft-form input[type=number],
.satft-form.satft-form select,
.satft-form.satft-form textarea {
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--satft-ink);
  background: #fff;
  border: 1px solid #b9bdbe;
  border-radius: var(--satft-radius);
  padding: 10px 11px;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.satft-form.satft-form input:hover,
.satft-form.satft-form select:hover {
  border-color: #8e9497;
}

.satft-form.satft-form input:focus,
.satft-form.satft-form select:focus,
.satft-form.satft-form textarea:focus {
  border-color: var(--satft-navy);
  box-shadow: 0 0 0 3px rgba(27, 59, 95, .14);
  outline: none;
}

.satft-form.satft-form input::placeholder {
  color: #9ba1a6;
  opacity: 1;
}

.satft-form.satft-form .gform-field-label--type-sub {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--satft-muted);
  margin-top: 5px;
  margin-bottom: 0;
}

/* --- First / Last row ---
   gravity-theme lays this out with .gform-grid-row and pads each
   .gform-grid-col, which indents First away from the left edge
   of every other field on the page. Replaced with a plain two
   column grid using the same 3% gutter as the half-width pairs,
   so First lines up with Business or Group Name and Last lines
   up with the right edge. */
.satft-form.satft-form .ginput_container_name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3%;
  row-gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.satft-form.satft-form .ginput_container_name > span {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  flex: none;
}

.satft-form.satft-form .ginput_container_name input {
  width: 100%;
}

/* --- field widths matched to their content ------------------- */
.satft-form.satft-form #field_136_9 input,
.satft-form.satft-form #field_136_20 input { max-width: 290px; }
.satft-form.satft-form #field_136_26 .ginput_container,
.satft-form.satft-form #field_136_27 .ginput_container { max-width: 230px; }
/* 220px, not 160px: at 160 the arrow and padding clipped the "am"/"pm" off the chosen time (Michelle, 17 Sep). */
.satft-form.satft-form #field_136_31 select,
.satft-form.satft-form #field_136_32 select { max-width: 220px; min-width: 150px; }
.satft-form.satft-form #field_136_49 input { max-width: 320px; }
.satft-form.satft-form #field_136_50 input { max-width: 110px; text-transform: uppercase; }
.satft-form.satft-form #field_136_50 select { max-width: 320px; } /* State is a dropdown since 17 Sep */
.satft-form.satft-form #field_136_33 input,
.satft-form.satft-form #field_136_34 input { max-width: 180px; }

.satft-form.satft-form #field_136_50 .ginput_counter { display: none; }

.satft-form.satft-form .gform-datepicker-toggle {
  color: var(--satft-muted);
}


/* =============================================================
   5. PAGE 1 — public / private as selectable cards
   ============================================================= */

.satft-form.satft-form #field_136_1 > .gfield_label,
.satft-form.satft-form #field_136_1 > legend {
  font-size: 17px;
  margin-bottom: 14px;
}

.satft-form.satft-form #field_136_1 .gfield_radio {
  display: grid;
  gap: 12px;
}

.satft-form.satft-form #field_136_1 .gchoice {
  position: relative;
  border: 1.5px solid var(--satft-line);
  border-radius: var(--satft-radius);
  background: #fff;
  margin: 0;
  transition: border-color .12s ease, background .12s ease;
}

.satft-form.satft-form #field_136_1 .gchoice:hover {
  border-color: #a9b6c4;
  background: #fcfdfe;
}

.satft-form.satft-form #field_136_1 .gchoice input[type=radio] {
  position: absolute;
  top: 18px;
  left: 16px;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--satft-navy);
}

.satft-form.satft-form #field_136_1 .gchoice label {
  display: block;
  margin: 0;
  padding: 15px 16px 15px 45px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  max-width: none;
}

.satft-form.satft-form #field_136_1 .satft-choice-sub {
  display: block;
  margin-top: 5px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--satft-muted);
  max-width: 58ch;
}

.satft-form.satft-form #field_136_1 .gchoice:has(input:checked) {
  border-color: var(--satft-navy);
  background: var(--satft-navy-tint);
  box-shadow: inset 0 0 0 1px var(--satft-navy);
}
.satft-form.satft-form #field_136_1 .gchoice:has(input:focus-visible) {
  outline: 3px solid #2f6fb2;
  outline-offset: 2px;
}


/* =============================================================
   6. ADDRESS + MAP, joined into one block
   ============================================================= */

.satft-form.satft-form #field_136_13 .gfgeo-address-locator-wrapper {
  position: relative;
  border: 1px solid var(--satft-line);
  border-radius: var(--satft-radius) var(--satft-radius) 0 0;
  border-bottom: none;
  padding: 14px 15px 15px;
  background: #fff;
}

.satft-form.satft-form #field_136_13 input.gfgeo-address-field {
  padding-right: 42px;
}

.satft-form.satft-form #field_136_13 .gfgeo-locator-button-wrapper.infield-locator {
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  opacity: .75;
}
.satft-form.satft-form #field_136_13 .gfgeo-locator-button-wrapper.infield-locator:hover {
  opacity: 1;
}

/* close the grid row gap so address and map read as one unit */
.satft-form.satft-form #field_136_14 {
  margin-top: -20px;
}

.satft-form.satft-form #field_136_14 > .gfield_label { display: none; }

.satft-form.satft-form #field_136_14 .gfield_description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--satft-muted);
  padding: 0 0 10px;
  max-width: 62ch;
}

.satft-form.satft-form #field_136_14 .gfgeo-map-wrapper {
  border: 1px solid var(--satft-line);
  border-radius: 0 0 var(--satft-radius) var(--satft-radius);
  overflow: hidden;
}

/* GFGeo sets the height inline, so this one needs !important */
.satft-form.satft-form #field_136_14 .gfgeo-map {
  height: 260px !important;
  width: 100% !important;
  background: #eff2ec;
}

/* Google's autocomplete dropdown renders outside the form */
.pac-container {
  border: 1px solid #b9bdbe;
  border-top: none;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 6px 18px rgba(16, 41, 65, .12);
  font-family: inherit;
}
.pac-item {
  padding: 8px 12px;
  font-size: 14.5px;
  line-height: 1.4;
  cursor: pointer;
  border-top: 1px solid #e8e8e4;
}
.pac-item:hover,
.pac-item-selected { background: #eaf0f6; }
.pac-item-query { font-size: 14.5px; }


/* =============================================================
   7. DAYS DONATIONS ARE ACCEPTED — checkbox chips
   ============================================================= */

.satft-form.satft-form #field_136_30 .gfield_checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.satft-form.satft-form #field_136_30 .gchoice {
  position: relative;
  margin: 0;
}

.satft-form.satft-form #field_136_30 .gchoice input[type=checkbox] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.satft-form.satft-form #field_136_30 .gchoice label {
  display: block;
  margin: 0;
  padding: 9px 15px;
  border: 1.5px solid var(--satft-line);
  border-radius: var(--satft-radius);
  background: #fff;
  color: var(--satft-muted);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  max-width: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.satft-form.satft-form #field_136_30 .gchoice:hover label { border-color: #a9b6c4; }

.satft-form.satft-form #field_136_30 .gchoice:has(input:checked) label {
  background: var(--satft-navy);
  border-color: var(--satft-navy);
  color: #fff;
}

.satft-form.satft-form #field_136_30 .gchoice:has(input:focus-visible) label {
  outline: 3px solid #2f6fb2;
  outline-offset: 2px;
}


/* =============================================================
   8. PAGE 3 — "Do you have a Soldiers' Angels account?"
   ============================================================= */

.satft-form.satft-form #field_136_35 .gfield_description { margin-bottom: 12px; }

.satft-form.satft-form #field_136_35 .gfield_radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.satft-form.satft-form #field_136_35 .gchoice {
  position: relative;
  margin: 0;
}

.satft-form.satft-form #field_136_35 .gchoice input[type=radio] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.satft-form.satft-form #field_136_35 .gchoice label {
  display: block;
  margin: 0;
  padding: 10px 20px;
  border: 1.5px solid var(--satft-line);
  border-radius: var(--satft-radius);
  background: #fff;
  color: var(--satft-muted);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  max-width: none;
}

.satft-form.satft-form #field_136_35 .gchoice:has(input:checked) label {
  background: var(--satft-navy);
  border-color: var(--satft-navy);
  color: #fff;
}
.satft-form.satft-form #field_136_35 .gchoice:has(input:focus-visible) label {
  outline: 3px solid #2f6fb2;
  outline-offset: 2px;
}


/* =============================================================
   9. PAGE 4 — consent blocks
   ============================================================= */

.satft-form.satft-form .gfield--type-consent {
  border: 1px solid var(--satft-line);
  border-radius: var(--satft-radius);
  padding: 15px 16px;
  margin: 0;
  background: #fcfcfb;
}

.satft-form.satft-form .gfield--type-consent > .gfield_label {
  font-size: 15px;
  color: var(--satft-navy);
  margin-bottom: 8px;
}

.satft-form.satft-form .ginput_container_consent {
  position: relative;
  padding-left: 30px;
}

.satft-form.satft-form .ginput_container_consent input[type=checkbox] {
  position: absolute;
  top: 3px;
  left: 0;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--satft-navy);
}

.satft-form.satft-form .gfield_consent_label {
  display: block;
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--satft-ink);
  max-width: 70ch;
  cursor: pointer;
}

.satft-form.satft-form #field_136_47 {
  background: #fff;
  border-style: dashed;
}
.satft-form.satft-form #field_136_47 .gfield_consent_label { font-size: 15px; }


/* =============================================================
   10. FOOTER BUTTONS
   The shared reset below uses the margin shorthand, which was
   outranking margin-left:auto on the Next button and pinning a
   lone Next to the left. The per-button rules now carry the
   same specificity as the reset and come after it.
   ============================================================= */

.satft-form.satft-form .gform_page_footer,
.satft-form.satft-form .gform_footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  padding: 18px 22px;
  border-top: 1px solid var(--satft-line-soft);
  background: #fafaf8;
  border-radius: 0 0 var(--satft-radius) var(--satft-radius);
}

.satft-form.satft-form .gform_page_footer button,
.satft-form.satft-form .gform_page_footer input[type=submit],
.satft-form.satft-form .gform_footer button,
.satft-form.satft-form .gform_footer input[type=submit] {
  font-size: 15.5px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.2;
  border-radius: var(--satft-radius);
  padding: 12px 26px;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}

/* primary: Next / Submit. Always hard right, with or without a
   Previous button next to it. */
.satft-form.satft-form .gform_page_footer .gform_next_button,
.satft-form.satft-form .gform_page_footer .gform_button,
.satft-form.satft-form .gform_footer .gform_button {
  background: var(--satft-gold);
  border-color: var(--satft-gold);
  color: #fff;
  order: 2;
  margin-left: auto;
}
.satft-form.satft-form .gform_page_footer .gform_next_button:hover,
.satft-form.satft-form .gform_page_footer .gform_button:hover,
.satft-form.satft-form .gform_footer .gform_button:hover {
  background: #75590f;
  border-color: #75590f;
  color: #fff;
}

/* secondary: Previous */
.satft-form.satft-form .gform_page_footer .gform_previous_button,
.satft-form.satft-form .gform_footer .gform_previous_button {
  background: #fff;
  border-color: #b9bdbe;
  color: var(--satft-navy);
  font-weight: 700;
  order: 1;
  margin-left: 0;
  margin-right: auto;
}
.satft-form.satft-form .gform_page_footer .gform_previous_button:hover,
.satft-form.satft-form .gform_footer .gform_previous_button:hover {
  border-color: var(--satft-navy);
  background: #fff;
  color: var(--satft-navy);
}

.satft-form.satft-form .gform_page_footer button:focus-visible,
.satft-form.satft-form .gform_footer button:focus-visible {
  outline: 3px solid #2f6fb2;
  outline-offset: 2px;
}

/* --- loading state ---
   While a page submits, GF sets aria-busy="true" on the button
   and draws its own spinner over the label, which is what makes
   the two collide. The label is hidden with a transparent colour
   rather than display:none so the button keeps its width, and
   ::after is redefined outright so whatever GF was drawing there
   is replaced rather than layered under. */
.satft-form.satft-form .gform_page_footer button[aria-busy="true"],
.satft-form.satft-form .gform_footer button[aria-busy="true"] {
  position: relative;
  color: transparent;
  text-shadow: none;
  pointer-events: none;
  cursor: default;
  outline: none;
}

.satft-form.satft-form .gform_page_footer button[aria-busy="true"]::before,
.satft-form.satft-form .gform_footer button[aria-busy="true"]::before {
  content: none;
}

.satft-form.satft-form .gform_page_footer button[aria-busy="true"]::after,
.satft-form.satft-form .gform_footer button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  opacity: 1;
  animation: satft-spin .6s linear infinite;
}

/* Previous is a white button, so it needs a dark spinner */
.satft-form.satft-form .gform_page_footer .gform_previous_button[aria-busy="true"]::after,
.satft-form.satft-form .gform_footer .gform_previous_button[aria-busy="true"]::after {
  border-color: rgba(27, 59, 95, .28);
  border-top-color: var(--satft-navy);
}

/* GF's separate spinner element, if this install renders one */
.satft-form.satft-form .gform_ajax_spinner,
.satft-form.satft-form img.gform_ajax_spinner,
.satft-form.satft-form .gform-loader {
  display: none !important;
}

@keyframes satft-spin {
  to { transform: rotate(360deg); }
}


/* =============================================================
   11. FIELD-LEVEL VALIDATION
   ============================================================= */

.satft-form.satft-form .gfield_error input,
.satft-form.satft-form .gfield_error select,
.satft-form.satft-form .gfield_error textarea {
  border-color: var(--satft-error);
  background: #fffafa;
}

.satft-form.satft-form .gfield_validation_message,
.satft-form.satft-form .validation_message {
  background: none;
  border: none;
  border-left: 3px solid var(--satft-error);
  border-radius: 0;
  padding: 2px 0 2px 10px;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--satft-error);
}

.satft-form.satft-form .gfield_error#field_136_1 .gchoice,
.satft-form.satft-form .gfield_error#field_136_35 .gchoice label,
.satft-form.satft-form .gfield_error#field_136_30 .gchoice label {
  border-color: var(--satft-error);
}


/* =============================================================
   12. CONFIRMATION
   (replaces .satft-form.satft-form, so it needs its own scope)
   ============================================================= */

#gform_confirmation_wrapper_136 {
  background: #fff;
  border: 1px solid #d6d7d2;
  border-left: 3px solid #2e6b4f;
  border-radius: 3px;
  padding: 22px;
  font-size: 16px;
  line-height: 1.6;
  box-shadow: 0 1px 2px rgba(16, 41, 65, .06), 0 8px 24px rgba(16, 41, 65, .07);
}
#gform_confirmation_wrapper_136 h2,
#gform_confirmation_wrapper_136 h3 {
  color: #1b3b5f;
  margin-top: 0;
}
#gform_confirmation_wrapper_136 .satft-cta {
  display: inline-block;
  background: #8a6a15;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  padding: 11px 22px;
  border-radius: 3px;
}
#gform_confirmation_wrapper_136 .satft-cta:hover { background: #75590f; }


/* =============================================================
   13. RESPONSIVE
   ============================================================= */

@media (max-width: 720px) {
  .satft-form.satft-form .satft-steps { padding: 16px; }
  .satft-form.satft-form .satft-steps ol {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .satft-form.satft-form .satft-step:not(.satft-step--current):not(.satft-step--complete):not(.satft-step--done) {
    display: none;
  }
  .satft-form.satft-form .satft-step + .satft-step::before { content: none; }
  .satft-form.satft-form .satft-step__pages { max-width: none; }

  .satft-form.satft-form .gform_page_fields { padding: 20px 16px 4px; }

  .satft-form.satft-form .gform_validation_errors {
    margin: 16px 16px 0;
  }

  .satft-form.satft-form .gform_page_footer,
  .satft-form.satft-form .gform_footer {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 16px;
  }
  .satft-form.satft-form .gform_page_footer button,
  .satft-form.satft-form .gform_page_footer .gform_next_button,
  .satft-form.satft-form .gform_page_footer .gform_previous_button,
  .satft-form.satft-form .gform_page_footer .gform_button,
  .satft-form.satft-form .gform_footer .gform_button {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* stop iOS zooming on focus */
  .satft-form.satft-form input[type=text],
  .satft-form.satft-form input[type=email],
  .satft-form.satft-form input[type=tel],
  .satft-form.satft-form input[type=url],
  .satft-form.satft-form select {
    font-size: 16px;
  }

  .satft-form.satft-form #field_136_9 input,
  .satft-form.satft-form #field_136_20 input,
  .satft-form.satft-form #field_136_49 input,
  .satft-form.satft-form #field_136_26 .ginput_container,
  .satft-form.satft-form #field_136_27 .ginput_container,
  .satft-form.satft-form #field_136_31 select,
  .satft-form.satft-form #field_136_32 select {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .satft-form.satft-form * { transition: none !important; }
  /* keep the spinner turning, just slowly, so the button still
     reads as busy rather than dead */
  .satft-form.satft-form button[aria-busy="true"]::after {
    animation-duration: 2s;
  }
}


/* =============================================================
   14. PAGE-LEVEL, OUTSIDE THE FORM
   Not scoped to the form. WordPress puts the page-id class on
   <body>; the second selector covers themes that also put it on
   the #page wrapper.
   ============================================================= */

body.page-id-27405 .entry-wrapper,
#page.page-id-27405 .entry-wrapper {
  background-position: top center !important;
}


/* Moved out of the page content on 15 Sep: page 27405 carried these in a
   <style> block pasted into a paragraph, with a TinyMCE bookmark span and a
   stray brace that broke the desktop rules. Same values as before; the card
   width (640px) is unchanged pending Mat's call on 720px. The card is centred
   (Inshal, 15 Sep); the theme's own left offset was calc(240px + 4vw) if that
   is ever wanted back. */
body.page-id-27405 .entry-content {
  margin-bottom: 3rem !important;
}
@media (min-width: 961px) {
  body.page-id-27405 .entry-content {
    max-width: 640px !important;
    margin-top: 150px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
body.page-id-27405 .hentry div.entry-content p {
  margin: 1.8rem 0;
}
body.page-id-27405 .entry-content > h1 {
  margin-bottom: 2rem;
  color: #963338;
}
body.page-id-27405 footer.site-footer > .signup {
  display: none !important;
}


/* =============================================================
   15. OPTIONAL — the decorative star rule under the form
   The four stars below the card come from the theme's styling
   of the <hr> that sits in the page content after the form.
   Right under a multi-page form it reads as a second progress
   bar. Cleanest fix is deleting that <hr> in the editor. If
   that is not convenient, uncomment this, but only if this
   stylesheet is loaded on the registration page alone.
   ============================================================= */

/*
.entry-content > hr { display: none; }
*/