/**
 * CCI — Gravity Forms (global theme styling)
 *
 * Ported from the per-widget Elementor CSS (its `selector` scope becomes the
 * global `.gform_wrapper`) so every Gravity Form on the site shares the CCI dark
 * theme. Radio choices render as selectable cards to match the Figma design.
 *
 * Field/label/select/phone/disclaimer styling: Figma 14171-46311.
 * Radio card styling: Figma 19814-1458.
 */

/* -------- Labels & descriptions -------- */
.gform_wrapper label,
.gform_wrapper legend {
  color: #fff;
  font-size: 16px;
  text-align: left;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  display: block;
}

/* !important on the colour to beat Gravity Forms' framework theme, which sets a
   dim label colour with higher specificity / later load order. Scoped to the
   field label + legend (radio *choice* labels lack .gfield_label, so their
   grey/white states below are unaffected). */
.gform_wrapper .gfield_label,
.gform_wrapper legend {
  color: #fff !important;
  /* 20px gap between a field's label and its input */
  margin-bottom: 20px !important;
}

/* Larger label + description type only on multi-step forms (single-page keeps
   16px label). */
.gform_wrapper form:has(.gf_page_steps) .gfield_label,
.gform_wrapper form:has(.gf_page_steps) legend {
  font-size: 18px !important;
  line-height: 28px !important;
}

.gform_wrapper form:has(.gf_page_steps) .gfield_description {
  font-size: 16px !important;
  line-height: 24px !important;
}

/* Description sits directly under the label/legend (regardless of GF's
   Description Placement setting) in muted grey. Ordering is done with flexbox so
   it works whether GF outputs the description above or below the input. */
/* No !important on display: a conditional-logic-hidden field carries an inline
   display:none that must still win, or the empty field shows as a large gap. */
.gform_wrapper .gfield,
.gform_wrapper .gfield > fieldset {
  display: flex;
  flex-direction: column;
}

.gform_wrapper .gfield_description {
  order: 1;
  color: #d3d3d3 !important;
  text-align: left;
  /* 40px gap between the description and the input below it */
  margin: 0 0 40px !important;
}

.gform_wrapper .gfield .ginput_container {
  order: 2;
}

.gform_wrapper .gfield_validation_message {
  order: 3;
}


.gform_wrapper .gfield_required.gfield_required_asterisk {
  margin-left: 5px;
}

/* Force an asterisk even on forms configured with the "(Required)" text
   indicator, so the required marker is consistent across every form. The text is
   hidden (still readable by screen readers) and replaced with a "*" that inherits
   GF's required colour. */
.gform_wrapper .gfield_required_text {
  margin-left: 5px;
  font-size: 0 !important;
}

.gform_wrapper .gfield_required_text::after {
  content: "*";
  font-size: 1rem;
}

/* Keep the required marker inline, right after the label text. GF's foundation
   theme makes the label/legend a flex-wrap container (align-items:baseline;
   gap:var(--gf-label-req-gap)), so the .gfield_required span is a flex item that
   wraps onto its own line on long labels. Force the label back to a block so its
   text + marker flow inline (and inline can't be blockified by a flex parent),
   and keep the marker itself inline. */
.gform_wrapper .gfield_label,
.gform_wrapper legend,
.gform_wrapper legend.gfield_label {
  display: block !important;
}

.gform_wrapper .gfield_required {
  display: inline !important;
}

/* Hide GF's global "required" legend and validation summary */
.gform_wrapper .gform_required_legend,
.gform_wrapper .gform_validation_errors {
  display: none !important;
}

/* -------- Text inputs, selects, textareas -------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper select,
.gform_wrapper textarea {
  border: 1px solid #23345a !important;
  background-color: #010f22 !important;
  /* Flatten GF's framework-theme inset shadow so fields are a solid fill. */
  box-shadow: none !important;
  height: 55px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  color: #fff;
  text-align: left;
}

/* Remove GF's background gradient on text fields (the select keeps its own
   background-image for the caret, handled below). */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
  background-image: none !important;
}

/* Focus: just recolour the 1px border to the active blue — no glow ring or
   thick border (GF's framework theme adds a box-shadow on focus). */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus,
.gform_wrapper .iti .iti__tel-input:focus {
  border-color: #1a6dff !important;
  box-shadow: none !important;
  outline: none !important;
}

.gform_wrapper .ginput_container textarea,
.gform_wrapper textarea,
.gform_wrapper textarea.large {
  height: 170px !important;
  min-height: 170px !important;
  padding: 14px 16px !important;
  resize: none !important;
}

/* Placeholder colour (and the unselected <select> label) */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder,
.gform_wrapper select {
  color: rgba(211, 211, 211, 0.25) !important;
  opacity: 1; /* Chrome needs this to honour the colour */
}

/* Once a value is chosen (class added by gravity-forms.js) show it in white */
.gform_wrapper input.has-value,
.gform_wrapper textarea.has-value,
.gform_wrapper select.has-value,
.gform_wrapper select:focus {
  color: #fff !important;
}

/* Custom select caret (and neutralise any plugin-injected FA arrow) */
.gform_wrapper .pp-gf-select-custom::after {
  content: none !important;
}

.gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 2em !important;
  /* Extra right padding so the value/placeholder clears the caret. */
  padding-right: 44px !important;
  /* Vertically centre the value in the 55px box (content height 55 - 2px border).
     A fixed-height appearance:none select won't centre without this. */
  line-height: 53px !important;
}

/* -------- Submit button -------- */
.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
  /* !important so GF's secondary (Previous) button style can't force it white. */
  background-color: #0048b4 !important;
  color: #fff !important;
  border: none !important;
  margin: 0 !important;
  height: 55px !important;
  /* Single-page default: full-width button. Multi-step overrides to 200px below. */
  width: 100% !important;
  border-radius: 8px !important;
  font-size: 18px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  /* No focus glow / tap highlight — the CTA button has none either. */
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  /* Same hover feel as the CTA button. */
  transition: background-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease;
}

/* Authoritative: the submit / next / previous buttons never carry their own
   vertical margin, whatever wrapper GF puts them in. DevTools showed the submit
   (input#gform_submit_button_N) keeping a top margin because GF's footer-scoped
   rule (.gform_wrapper .gform_footer input[type=submit], 0-3-1) out-specifies a
   plain override AND the button isn't always inside a container we target. This
   selector (body + form + id-prefix) beats GF and matches the button directly,
   so spacing is only ever the footer's gap / margin. Vertical margins only, so
   the desktop Previous keeps its margin-right:auto. */
body .gform_wrapper form input[type="submit"],
body .gform_wrapper form input.gform_button,
body .gform_wrapper form input[id^="gform_submit_button"],
body .gform_wrapper form .gform_next_button,
body .gform_wrapper form .gform_previous_button {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block: 0 !important;
}

/* The live form also carries leftover per-widget ELEMENTOR CSS on the form
   element, e.g. `.elementor-NNN .elementor-element-XXX input[type=submit]
   { margin-top: 24px !important }` (0-4-1). That out-ranks the rule above, so the
   real fix is to delete that stray CSS in Elementor. Until that's done, repeat
   `.gform_wrapper` to raise specificity to 0-4-x and win, keeping the submit /
   nav buttons flush (spacing stays the footer's). Vertical margins only. */
body .gform_wrapper.gform_wrapper.gform_wrapper form input[type="submit"],
body .gform_wrapper.gform_wrapper.gform_wrapper form input[id^="gform_submit_button"],
body .gform_wrapper.gform_wrapper.gform_wrapper form .gform_button,
body .gform_wrapper.gform_wrapper.gform_wrapper form .gform_next_button,
body .gform_wrapper.gform_wrapper.gform_wrapper form .gform_previous_button {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block: 0 !important;
}

/* Multi-step: fixed 200px buttons (single-page stays full-width above). */
.gform_wrapper form:has(.gf_page_steps) input[type="submit"],
.gform_wrapper form:has(.gf_page_steps) .gform_button,
.gform_wrapper form:has(.gf_page_steps) .gform_next_button,
.gform_wrapper form:has(.gf_page_steps) .gform_previous_button {
  width: 200px !important;
  max-width: 200px !important;
}

/* Hover / focus: darken to the CTA button's hover colour. Base bg is !important,
   so the hover needs it too to win. No focus glow — just the colour change. */
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper input[type="submit"]:focus,
.gform_wrapper input[type="submit"]:active,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus,
.gform_wrapper .gform_button:active,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_next_button:focus,
.gform_wrapper .gform_next_button:active,
.gform_wrapper .gform_previous_button:hover,
.gform_wrapper .gform_previous_button:focus,
.gform_wrapper .gform_previous_button:active {
  background-color: #003a90 !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 40px gap between the last field and the button row (single-page + multi-step);
   lay Previous + Next/Submit side by side. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px !important;
}

/* GF's "Fill Container" submit width would make Submit full-width and drop it to
   its own row — force it to 200px like the other buttons. High specificity so it
   beats GF's framework-theme width rule. */
.gform_wrapper form:has(.gf_page_steps) .gform-button--width-full,
.gform_wrapper form:has(.gf_page_steps) input[type="submit"],
.gform_wrapper .gform_footer .gform-button--width-full,
.gform_wrapper .gform_page_footer .gform-button--width-full,
.gform_wrapper input.gform-button--width-full,
.gform_wrapper .gform_button.gform-button--width-full {
  width: 200px !important;
  max-width: 200px !important;
  flex: 0 0 auto !important;
}

/* Multi-step: push Previous to the far left; Next/Submit sit at the right via the
   footer's justify-content:flex-end — so Submit carries no margin of its own. */
.gform_wrapper form:has(.gf_page_steps) .gform_previous_button {
  margin-right: auto !important;
}

/* Kill the top margin GF's framework theme forces on footer buttons. GF's CSS
   loads after this file, so its footer-scoped rule wins on equal specificity —
   the leading `body` and the logical margin props push us above it. Only the
   VERTICAL margins are zeroed so the multi-step Previous keeps margin-right:auto.
   The 40px gap above the button row is the footer's own margin-top, not the
   button's; footer padding-top is zeroed too in case GF spaces it there. */
body .gform_wrapper .gform_footer,
body .gform_wrapper .gform_page_footer,
body .gform_wrapper .gform-page-footer {
  padding-top: 0 !important;
}

body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer .gform_button,
body .gform_wrapper .gform_page_footer input[type="submit"],
body .gform_wrapper .gform_page_footer .gform_button,
body .gform_wrapper .gform_page_footer .gform_next_button,
body .gform_wrapper .gform_page_footer .gform_previous_button,
body .gform_wrapper .gform-page-footer input[type="submit"],
body .gform_wrapper .gform-page-footer .gform_next_button,
body .gform_wrapper .gform-page-footer .gform_previous_button {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Hide the AJAX submit loader/spinner. */
.gform_wrapper .gform_ajax_spinner,
.gform_wrapper .gform-loader,
.gform_wrapper .gform_footer .gform-loader,
.gform_wrapper .gform_page_footer .gform-loader {
  display: none !important;
}

/* -------- Multi-step page indicator -------- */
/* A vertical column of number badges on the left, form content on the right.
   The two-column layout is scoped to multi-step forms (those with a step
   indicator) so single-page forms are unaffected. */
.gform_wrapper form:has(.gf_page_steps) {
  display: flex;
  align-items: flex-start;
  /* Gap between the step column and the content (24px, matches tablet/mobile). */
  gap: 24px;
}

.gform_wrapper .gf_page_steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 auto;
  border: 0;
  /* No margin on the steps wrapper (GF adds its own). */
  margin: 0 !important;
}

.gform_wrapper .gform_body,
.gform_wrapper .gform-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Desktop: keep the multi-step form a constant height between pages and pin the
   nav buttons to the bottom. OPT-IN: add the CSS class "cci-fixed-height" to the
   form (GF → Form Settings → CSS Class Name, or the Elementor widget's CSS
   class). gravity-forms.js then normalises it to `cci-fh-on` on the wrapper,
   measures the tallest page and writes its height to --cci-gf-page-min-h. The
   content column holds that min-height, the page fills it as a flex column, and
   the fields area grows so the footer sits at the bottom. Tablet/mobile (the
   stacked card) size to content, so this is desktop only. */
@media (min-width: 1025px) {
  .gform_wrapper.cci-fh-on form:has(.gf_page_steps) .gform_body,
  .gform_wrapper.cci-fh-on form:has(.gf_page_steps) .gform-body {
    display: flex;
    flex-direction: column;
    min-height: var(--cci-gf-page-min-h, 500px);
  }

  .gform_wrapper.cci-fh-on form:has(.gf_page_steps) .gform_pages,
  .gform_wrapper.cci-fh-on form:has(.gf_page_steps) .gform_page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .gform_wrapper.cci-fh-on form:has(.gf_page_steps) .gform_page_fields {
    flex: 1 1 auto;
  }
}

/* Measurement pass (JS toggles this class briefly): show every page at its
   natural size, unconstrained, so the tallest can be measured. Applies at any
   width; JS removes it synchronously after reading, so it never paints. */
.gform_wrapper.cci-fh-measuring form:has(.gf_page_steps) .gform_body,
.gform_wrapper.cci-fh-measuring form:has(.gf_page_steps) .gform-body,
.gform_wrapper.cci-fh-measuring form:has(.gf_page_steps) .gform_pages,
.gform_wrapper.cci-fh-measuring form:has(.gf_page_steps) .gform_page,
.gform_wrapper.cci-fh-measuring form:has(.gf_page_steps) .gform_page_fields {
  display: block !important;
  min-height: 0 !important;
  flex: none !important;
}

.gform_wrapper .gf_step {
  display: inline-flex;
  align-items: center;
  margin: 0;
  opacity: 1;
  font-family: "Inter", sans-serif;
}

/* Hide the step title */
.gform_wrapper .gf_step_label {
  display: none !important;
}

/* OPT-IN: show only the current step badge, hiding completed + upcoming ones.
   Add the CSS class "cci-active-step-only" to the form (GF → Form Settings → CSS
   Class Name), the Elementor form widget, or any ancestor — the descendant
   selector matches the class wherever it sits above the step list. */
.cci-active-step-only .gf_page_steps .gf_step:not(.gf_step_active) {
  display: none !important;
}

/* Number badge — pending/upcoming step: outline only, no fill. */
.gform_wrapper .gf_step_number {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px !important;
  background: transparent !important;
  color: #6b7a99 !important;
  font-weight: 600;
  font-size: 18px;
  border: 1px solid #23345a !important;
  box-shadow: none !important;
}

/* Active step — blue square with its number (no visible outline). */
.gform_wrapper .gf_step_active .gf_step_number {
  background: #0048b4 !important;
  color: #fff !important;
  border-radius: 8px !important;
  border-color: transparent !important;
}

/* Completed step — muted grey fill (the former "inactive" treatment). JS
   restores the number that GF replaces with a checkmark; Inter override so a
   JS-set number can't render through GF's icon font. */
.gform_wrapper .gf_step_completed .gf_step_number,
.gform_wrapper .gf_step_complete .gf_step_number {
  background: #16233d !important;
  color: #6b7a99 !important;
  border-color: transparent !important;
  border-radius: 8px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 18px !important;
  text-indent: 0 !important;
}

/* Suppress GF's own checkmark (rendered on the number via a pseudo-element). */
.gform_wrapper .gf_step_completed .gf_step_number::before,
.gform_wrapper .gf_step_completed .gf_step_number::after,
.gform_wrapper .gf_step_complete .gf_step_number::before,
.gform_wrapper .gf_step_complete .gf_step_number::after {
  content: none !important;
  display: none !important;
}

/* -------- Validation -------- */
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  text-align: left;
  color: #ff8f8f !important;
  /* No margin except an 8px gap above the field it belongs to. */
  margin: 8px 0 0 !important;
}

/* Tint the input border of an errored field to match the error text. GF flags
   the field wrapper with .gfield_error. Covers text/email/tel/number inputs,
   the select, the textarea and the intl-tel-input phone field. */
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error input[type="number"],
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error .iti .iti__tel-input {
  border-color: #ff8f8f !important;
}

/* -------- Confirmation message (post-submit) -------- */
.gform_confirmation_message,
.gform_confirmation_wrapper,
.gform_wrapper .gform_confirmation_message,
.gforms_confirmation_message,
[id^="gform_confirmation_message"] {
  color: #fff !important;
  font-family: "Inter", sans-serif;
  font-size: 20px !important;
  line-height: 30px !important;
  text-align: center !important;
}

.gform_confirmation_message p,
[id^="gform_confirmation_message"] p {
  color: #fff !important;
}

/* -------- International phone (intl-tel-input) -------- */
.gform_wrapper .iti__selected-country {
  height: 100% !important;
}

.gform_wrapper .iti__selected-country-primary {
  padding: 0 0 0 15px !important;
}

/* Higher specificity than the base input padding (.gform_wrapper input[type="tel"])
   so the flag/country selector doesn't overlap the placeholder. */
.gform_wrapper .iti .iti__tel-input {
  padding-left: 55px !important;
}

.gform_wrapper .iti__search-input {
  border-radius: 0 !important;
}

.gform_wrapper .iti__country-list {
  background: #000b1a;
  color: #fff;
}

/* -------- Disclaimer blocks (custom field CSS classes) -------- */
.gform_wrapper .someoneelse-disclaimer {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#000e22, #000e22) padding-box,
    linear-gradient(90deg, #856220, #f4e683, #bf923d) border-box;
  padding: 32px;
  color: #fff;
  font-style: italic;
  font-family: "Inter", sans-serif;
  margin-top: -20px;
}

.gform_wrapper .application-disclaimer label {
  color: #a47910;
  margin-bottom: 20px;
}

/* -------- Radio choices as selectable cards (Figma 19814-1458) -------- */
.gform_wrapper .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gform_wrapper .gfield_radio .gchoice {
  position: relative;
  /* !important: Gravity Forms' own theme forces display:grid on .gchoice, which
     would otherwise ignore this flex layout and its gap. */
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid #23345a;
  border-radius: 8px;
  background-color: #010f22;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.gform_wrapper .gfield_radio .gchoice:hover {
  border-color: #33507f;
}

/* Selected card — needs :has() (all evergreen browsers 2023+) */
.gform_wrapper .gfield_radio .gchoice:has(input[type="radio"]:checked) {
  border-color: #1a6dff;
  background-color: rgba(26, 109, 255, 0.08);
}

.gform_wrapper .gfield_radio .gchoice label {
  margin: 0;
  flex: 1 1 auto;
  cursor: pointer;
  color: #d3d3d3 !important;
  font-weight: 500;
}

.gform_wrapper .gfield_radio .gchoice:has(input:checked) label {
  color: #fff !important;
}

/* Stretch the label so the whole card is a click target */
.gform_wrapper .gfield_radio .gchoice label::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* Custom radio dot (defensive !important so GF's own theme can't restyle it) */
.gform_wrapper .gfield_radio input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  margin: 0 !important;
  padding: 0;
  border: 2px solid #6b7a99 !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer;
}

.gform_wrapper .gfield_radio input[type="radio"]:checked {
  border-color: #1a6dff !important;
}

.gform_wrapper .gfield_radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #1a6dff;
}

.gform_wrapper .gfield_radio input[type="radio"]:focus-visible {
  outline: 2px solid #1a6dff;
  outline-offset: 2px;
}

/* -------- Rating scale: 1–10 number boxes (Figma 20751-2558) --------
   Build it with a Radio field whose choices are the numbers 1–10 (label AND
   value), then add the CSS class "cci-rating-scale" to the field
   (Appearance → Custom CSS Class). These rules override the default vertical
   radio-card style above and lay the choices out as a horizontal row of
   selectable 56px boxes. */
.gform_wrapper .cci-rating-scale .gfield_radio {
  /* !important: GF's framework theme forces display:grid (single column) on
     .gfield_radio, which would ignore a plain flex-direction and stack the boxes
     vertically. Force a flex row so the boxes sit in a line and wrap. */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px;
}

.gform_wrapper .cci-rating-scale .gfield_radio .gchoice {
  flex: 0 0 auto;
  justify-content: center;
  gap: 0 !important;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}

.gform_wrapper .cci-rating-scale .gfield_radio .gchoice:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

/* Selected box — blue border + tint + blue number. */
.gform_wrapper .cci-rating-scale .gfield_radio .gchoice:has(input[type="radio"]:checked) {
  border-color: #0048b4;
  background-color: rgba(0, 72, 180, 0.1);
}

.gform_wrapper .cci-rating-scale .gfield_radio .gchoice:has(input:focus-visible) {
  outline: 2px solid #1a6dff;
  outline-offset: 2px;
}

/* Hide the radio dot but keep it focusable/selectable — the number is the box. */
.gform_wrapper .cci-rating-scale .gfield_radio input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* Centred number filling the whole box. */
.gform_wrapper .cci-rating-scale .gfield_radio .gchoice label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #fff !important;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
}

.gform_wrapper .cci-rating-scale .gfield_radio .gchoice:has(input:checked) label {
  color: #0048b4 !important;
}

/* -------- Multi-step page transition --------
   The freshly rendered page slides + fades in horizontally on each step change:
   from the right when going forward (Next), from the left when going back
   (Previous). gravity-forms.js toggles the direction class on gform_post_render
   (re-added with a reflow so it restarts every navigation) based on the last
   nav button clicked. */
@keyframes cci-gf-page-in-next {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cci-gf-page-in-prev {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.gform_wrapper .gform_page.cci-gf-animate-next {
  animation: cci-gf-page-in-next 0.6s ease both;
}

.gform_wrapper .gform_page.cci-gf-animate-prev {
  animation: cci-gf-page-in-prev 0.6s ease both;
}

/* Clip the horizontal slide so it can't overflow the form / card (multi-step
   only; overflow-y stays visible so select / phone dropdowns aren't clipped). */
.gform_wrapper form:has(.gf_page_steps) .gform_body {
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  .gform_wrapper .gform_page.cci-gf-animate-next,
  .gform_wrapper .gform_page.cci-gf-animate-prev {
    animation: none;
  }
}

/* -------- Cursors -------- */
.gform_wrapper input[type="radio"],
.gform_wrapper .gchoice label {
  cursor: pointer;
}

/* -------- Multi-step: tablet + mobile layout --------
   Single current-step badge on top, form below, full-width stacked buttons
   (per the Figma tablet/mobile design). */
@media (max-width: 1024px) {
  .gform_wrapper form:has(.gf_page_steps) {
    flex-direction: column;
    /* Stretch children so the body (and its footer) span full width once the
       steps move on top — otherwise flex-start collapses them to content width. */
    align-items: stretch;
    /* No flex gap: it would land between the body and the form-level submit
       footer too, inflating the Previous->Submit gap. Spacing is set per-edge
       via the body's top margin (steps->content) and the footer's top margin
       (content->submit) instead. */
    gap: 0;
    /* Padded, gold-bordered card wrapping the whole step (per Figma). */
    padding: 32px 24px;
    background: #010f22;
    border: 1px solid #856220;
    border-radius: 16px;
  }

  /* Steps -> content spacing (replaces the removed form gap). */
  body .gform_wrapper form:has(.gf_page_steps) .gform_body,
  body .gform_wrapper form:has(.gf_page_steps) .gform-body {
    margin-top: 24px !important;
  }

  /* All step badges in a horizontal row, 15px apart. body + !important so GF's
     later-loading rule can't override the gap. */
  body .gform_wrapper .gf_page_steps {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    column-gap: 15px !important;
    row-gap: 15px !important;
  }

  /* Full-width, stacked buttons with a 15px gap between them. body prefix +
     !important so GF's later-loading footer rule can't override the gap. */
  body .gform_wrapper .gform_footer,
  body .gform_wrapper .gform_page_footer,
  body .gform_wrapper .gform-page-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 15px !important;
    row-gap: 15px !important;
  }

  /* Last page of a multi-step form: GF renders Submit in the form-level
     .gform_footer, separate from the Previous button in the page footer, so the
     flex gap above can't reach between them — their spacing is this footer's
     top margin. Pull it to 15px to match the button gap (the 40px field gap is
     provided by the page footer above it). */
  body .gform_wrapper form:has(.gf_page_steps) .gform_footer {
    margin-top: 15px !important;
  }

  .gform_wrapper input[type="submit"],
  .gform_wrapper .gform_button,
  .gform_wrapper .gform_next_button,
  .gform_wrapper .gform_previous_button,
  .gform_wrapper .gform-button--width-full,
  .gform_wrapper form:has(.gf_page_steps) .gform-button--width-full,
  .gform_wrapper form:has(.gf_page_steps) input[type="submit"],
  .gform_wrapper form:has(.gf_page_steps) .gform_button,
  .gform_wrapper form:has(.gf_page_steps) .gform_next_button,
  .gform_wrapper form:has(.gf_page_steps) .gform_previous_button {
    width: 100% !important;
    max-width: 100% !important;
    /* Clear the desktop Previous auto-margin so it stacks flush like the rest,
       and zero all vertical margins so no button (esp. Submit) carries a top
       margin on tablet/mobile — spacing comes from the footer gap / margin. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block: 0 !important;
  }
}

/* -------- Mobile -------- */
@media only screen and (max-width: 600px) {
  .gform_wrapper .gform-grid-row {
    row-gap: 40px;
  }
}