/**
 * "Get Your Monthly Estimate" - two-panel wizard.
 *
 * Loaded by lib/gravity-forms-estimate.php, only on pages rendering the form.
 *
 * Everything here is the Haultrax system turned up, not a new one: the navy
 * band and the 3px-blue-top-border card both come straight off the FMS page
 * (custom-page-builder-block.css .page-builder--supported-operations).
 *
 * Two GF quirks the selectors have to respect:
 *   1. The form-level cssClass lands on <form>; the wrapper div gets
 *      `<cssClass>_wrapper`. Never compound .gform_wrapper with .htx-estimate-form.
 *   2. gravity-theme's own rules are 3 classes deep, so form-scoped rules use
 *      `.gravity-theme form.htx-estimate-form` (0,3,1) to outrank them.
 */

/* Tokens only. The confirmation shares the palette but not the shell's layout,
   so nothing structural belongs in this rule. */
.htx-estimate-shell,
.htx-estimate-confirmation {
  --htx-blue: #017BC4;
  --htx-blue-bright: #1696F2;
  --htx-navy: #041B38;
  --htx-navy-deep: #020F20;
  --htx-muted: #52637A;
  --htx-on-navy: #B8DAEE;
  --htx-light: #EBEEF2;
  --htx-icon-bg: #E6F5FB;
  --htx-border: #D6DDE6;
  --htx-danger: #E52828;
  --htx-shadow: 0 12px 28px rgba(4, 25, 57, .07);
  --htx-shadow-lift: 0 18px 40px rgba(4, 25, 57, .12);
}

.htx-estimate-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  max-width: 1120px;
  margin: 0 auto;
  background: #fff;
  box-shadow: var(--htx-shadow);
}

/* =========================================================== The navy rail */

.htx-rail {
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  background: var(--htx-navy);
  background-image: linear-gradient(160deg, var(--htx-navy) 0%, var(--htx-navy-deep) 100%);
  color: #fff;
}

.htx-rail__count {
  margin: 0 0 28px;
  color: var(--htx-on-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

.htx-rail__steps {
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.htx-rail__step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0 0 22px;
  color: rgba(255, 255, 255, .5);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  transition: color .25s cubic-bezier(.2, .7, .3, 1);
}

.htx-rail__step:last-child {
  padding-bottom: 0;
}

/* The connector: a spine the marker travels down */
.htx-rail__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 2px;
  left: 13px;
  width: 2px;
  background: rgba(255, 255, 255, .14);
}

.htx-rail__step--done:not(:last-child)::before {
  background: var(--htx-blue-bright);
}

.htx-rail__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  transition: background .25s cubic-bezier(.2, .7, .3, 1),
              border-color .25s cubic-bezier(.2, .7, .3, 1),
              color .25s cubic-bezier(.2, .7, .3, 1);
}

.htx-rail__step--current {
  color: #fff;
}

.htx-rail__step--current .htx-rail__marker {
  background: var(--htx-blue);
  border-color: var(--htx-blue-bright);
  box-shadow: 0 0 0 4px rgba(22, 150, 242, .18);
  color: #fff;
}

.htx-rail__step--done {
  color: var(--htx-on-navy);
}

.htx-rail__step--done .htx-rail__marker {
  background: var(--htx-blue-bright);
  border-color: var(--htx-blue-bright);
  color: transparent;
}

/* Tick replaces the numeral on a completed step */
.htx-rail__step--done .htx-rail__marker::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 7px;
  border-bottom: 2.5px solid #fff;
  border-left: 2.5px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}

/* ------------------------------------------------------- Running summary */

.gravity-theme form.htx-estimate-form .htx-rail__summary,
.htx-rail__summary {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.htx-rail__summary[hidden] {
  display: none;
}

.htx-rail__summary-title {
  margin: 0 0 14px;
  color: var(--htx-on-navy);
  font-family: "PT Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.htx-rail__breakdown {
  margin: 0;
  padding: 0;
  list-style: none;
}

.htx-rail__breakdown[hidden] {
  display: none;
}

.htx-rail__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--htx-on-navy);
  font-size: 14px;
}

.htx-rail__breakdown li:last-child {
  border-bottom: 0;
}

.htx-rail__breakdown li span:last-child {
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.htx-rail__note {
  margin: auto 0 0;
  padding-top: 28px;
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  line-height: 1.55;
}

/* ========================================================= The form panel */

.htx-estimate-panel {
  padding: 48px 48px 44px;
  min-width: 0;
}

.gravity-theme form.htx-estimate-form {
  max-width: 640px;
}

/* The rail carries the intro. Nothing sits above the step heading. */
.gravity-theme form.htx-estimate-form .gform_heading {
  display: none;
}

.gravity-theme form.htx-estimate-form .gform_description {
  display: block;
  color: var(--htx-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* One authored moment: each step rises in. Rerun on every AJAX page swap. */
.gravity-theme form.htx-estimate-form .gform_page {
  animation: htx-step-in .42s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes htx-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- Fields */

.gravity-theme form.htx-estimate-form .gfield_label {
  display: block;
  margin: 0 0 6px;
  color: var(--htx-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.gravity-theme form.htx-estimate-form .htx-question .gfield_label,
.gravity-theme form.htx-estimate-form .gsection_title {
  display: block;
  margin: 0 0 10px;
  color: var(--htx-navy);
  font-family: "PT Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
}

.gravity-theme form.htx-estimate-form .htx-panel-heading {
  margin: 0 0 10px;
  color: var(--htx-navy);
  font-family: "PT Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
}

.gravity-theme form.htx-estimate-form .htx-panel-intro {
  max-width: 56ch;
  margin: 0 0 28px;
  color: var(--htx-muted);
  font-size: 15px;
  line-height: 1.55;
}

.gravity-theme form.htx-estimate-form .gsection {
  margin-bottom: 28px;
  padding: 0;
  border: 0;
}

.gravity-theme form.htx-estimate-form .gsection_description,
.gravity-theme form.htx-estimate-form .gfield_description {
  padding: 0;
  color: var(--htx-muted);
  font-size: 15px;
  line-height: 1.55;
}

.gravity-theme form.htx-estimate-form .htx-question .gfield_description {
  margin-bottom: 4px;
}

.gravity-theme form.htx-estimate-form .htx-question .ginput_container {
  margin-top: 8px;
}

/* GF prints "Please enter a number from 0 to 9999" under every quantity field.
   Three identical hints side by side is noise, so hold it until the field is
   actually in error. It stays in the a11y tree via aria-describedby. */
.gravity-theme form.htx-estimate-form .gfield_description.instruction {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gravity-theme form.htx-estimate-form .gfield_error .gfield_description.instruction {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  margin-top: 8px;
  overflow: visible;
  white-space: normal;
  color: var(--htx-danger);
  font-size: 14px;
  font-weight: 600;
}

/* Figma: PT Sans Regular 13px #017BC4, upright, no tracking. */
.gravity-theme form.htx-estimate-form .gfield_required {
  color: var(--htx-blue);
  font-family: "PT Sans", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

/* Figma: on the step headings the tag is PT Sans Bold 13px #017BC4, uppercase,
   4% tracking. PT Sans ships Regular and Bold only, so 600 silently rendered as
   Regular - it has to be 700. Kept inline and nowrap so it travels with the last
   word instead of landing on the line above when the heading wraps. */
.gravity-theme form.htx-estimate-form .htx-question .gfield_required {
  display: inline;
  margin-left: 6px;
  font-family: "PT Sans", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Underline inputs. assets/styles/components/_forms.scss paints every GF text
   input with a 4px blue bottom border at (0,5,2); the .htx-estimate-shell
   prefix takes these to (0,6,2) so the resting state can be neutral and blue
   can mean focus. */
.htx-estimate-shell .gravity-theme form.htx-estimate-form .gform_fields .gfield input[type="text"],
.htx-estimate-shell .gravity-theme form.htx-estimate-form .gform_fields .gfield input[type="email"],
.htx-estimate-shell .gravity-theme form.htx-estimate-form .gform_fields .gfield input[type="tel"] {
  width: 100%;
  min-height: 44px;
  padding: 6px 2px !important;
  background-color: transparent;
  border: 0;
  border-bottom: 3px solid var(--htx-border);
  border-radius: 0;
  color: var(--htx-navy);
  font-size: 18px !important;
  transition: border-color .2s ease;
}

.htx-estimate-shell .gravity-theme form.htx-estimate-form .gform_fields .gfield input:hover {
  border-bottom-color: #A9B6C6;
}

.htx-estimate-shell .gravity-theme form.htx-estimate-form .gform_fields .gfield input:focus {
  border-bottom-color: var(--htx-blue);
  box-shadow: 0 2px 0 0 var(--htx-blue);
  outline: 0;
}

.gravity-theme form.htx-estimate-form input::placeholder {
  color: #8494A6;
}

/* ------------------------------------------- Step 2: fleet quantities */

/* gravity-theme spans every .gfield 1/-1 on its 12-col grid */
.gravity-theme form.htx-estimate-form .gform_fields .gfield.htx-asset {
  grid-column: span 4;
}

.gravity-theme form.htx-estimate-form .htx-asset .ginput_container {
  margin-top: 0;
}

.gravity-theme form.htx-estimate-form .htx-asset .gfield_label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: "PT Sans", sans-serif;
  font-size: 17px;
}

.gravity-theme form.htx-estimate-form .htx-asset .htx-choice-icon {
  flex: 0 0 auto;
}

.gravity-theme form.htx-estimate-form .htx-asset .htx-choice-icon img {
  display: block;
  width: 44px;
  height: 44px;
  padding: 9px;
  background: var(--htx-icon-bg);
  border-radius: 5px;
  object-fit: contain;
}

/* ---------------------------------------------- Step 3: module choices */

.gravity-theme form.htx-estimate-form .htx-modules .gfield_checkbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gravity-theme form.htx-estimate-form .htx-modules .gchoice {
  position: relative;
  margin: 0;
  padding: 0;
}

.gravity-theme form.htx-estimate-form .htx-modules .gchoice input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gravity-theme form.htx-estimate-form .htx-modules .gchoice label {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  /* gravity-theme caps choice labels at calc(100% - 32px) to leave room for the
     native checkbox. Ours is visually hidden, so the card takes the full cell. */
  max-width: 100%;
  height: 100%;
  min-height: 44px;
  margin: 0;
  padding: 16px 18px 20px;
  background: var(--htx-light);
  border-top: 3px solid transparent;
  color: var(--htx-navy);
  cursor: pointer;
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  transition: background .22s cubic-bezier(.2, .7, .3, 1),
              border-color .22s cubic-bezier(.2, .7, .3, 1),
              box-shadow .22s cubic-bezier(.2, .7, .3, 1),
              transform .22s cubic-bezier(.2, .7, .3, 1);
}

.gravity-theme form.htx-estimate-form .htx-modules .gchoice label:hover {
  background: #fff;
  border-top-color: var(--htx-border);
  box-shadow: var(--htx-shadow);
  transform: translateY(-2px);
}

.gravity-theme form.htx-estimate-form .htx-modules .gchoice input:checked + label {
  background: #fff;
  border-top-color: var(--htx-blue);
  box-shadow: var(--htx-shadow-lift);
}

.gravity-theme form.htx-estimate-form .htx-modules .gchoice input:focus-visible + label {
  outline: 3px solid var(--htx-blue-bright);
  outline-offset: 2px;
}

.gravity-theme form.htx-estimate-form .htx-modules .htx-choice-icon img {
  display: block;
  width: 44px;
  height: 44px;
  padding: 9px;
  background: var(--htx-icon-bg);
  border-radius: 5px;
  object-fit: contain;
  transition: background .22s ease;
}

.gravity-theme form.htx-estimate-form .htx-modules .gchoice input:checked + label .htx-choice-icon img {
  background: #D6EEFA;
}

/* Selection tick */
.gravity-theme form.htx-estimate-form .htx-modules .gchoice label::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--htx-border);
  border-radius: 50%;
  transition: background .22s ease, border-color .22s ease;
}

.gravity-theme form.htx-estimate-form .htx-modules .gchoice input:checked + label::after {
  background: var(--htx-blue) 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") center / 12px no-repeat;
  border-color: var(--htx-blue);
}

/* --------------------------------------------------------------- Buttons */

.gravity-theme form.htx-estimate-form .gform_page_footer,
.gravity-theme form.htx-estimate-form .gform_footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--htx-border);
}

.gravity-theme form.htx-estimate-form .gform_page_footer .gform_button,
.gravity-theme form.htx-estimate-form .gform_page_footer .gform_next_button,
.gravity-theme form.htx-estimate-form .gform_page_footer .gform_previous_button,
.gravity-theme form.htx-estimate-form .gform_footer .gform_button {
  min-height: 48px;
  height: auto;
  margin: 0;
  padding: 13px 34px;
  border: 3px solid var(--htx-navy);
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.gravity-theme form.htx-estimate-form .gform_page_footer .gform_button,
.gravity-theme form.htx-estimate-form .gform_page_footer .gform_next_button,
.gravity-theme form.htx-estimate-form .gform_footer .gform_button {
  order: 2;
  float: none;
  margin-left: auto;
  background: var(--htx-navy);
  color: #fff;
}

.gravity-theme form.htx-estimate-form .gform_page_footer .gform_button:hover,
.gravity-theme form.htx-estimate-form .gform_page_footer .gform_next_button:hover,
.gravity-theme form.htx-estimate-form .gform_footer .gform_button:hover {
  background: var(--htx-blue);
  border-color: var(--htx-blue);
}

.gravity-theme form.htx-estimate-form .gform_page_footer .gform_button:focus-visible,
.gravity-theme form.htx-estimate-form .gform_page_footer .gform_next_button:focus-visible,
.gravity-theme form.htx-estimate-form .gform_page_footer .gform_previous_button:focus-visible,
.gravity-theme form.htx-estimate-form .gform_footer .gform_button:focus-visible {
  outline: 3px solid var(--htx-blue-bright);
  outline-offset: 3px;
}

.gravity-theme form.htx-estimate-form .gform_page_footer .gform_previous_button {
  order: 1;
  background: transparent;
  border-color: var(--htx-border);
  color: var(--htx-muted);
}

.gravity-theme form.htx-estimate-form .gform_page_footer .gform_previous_button:hover {
  border-color: var(--htx-navy);
  color: var(--htx-navy);
}

/* GF disables buttons during AJAX submission */
.gravity-theme form.htx-estimate-form input[type="submit"]:disabled,
.gravity-theme form.htx-estimate-form input[type="button"]:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.gravity-theme form.htx-estimate-form .gform_ajax_spinner {
  display: inline-block;
  order: 3;
  margin: 0 0 0 12px;
}

/* --------------------------------------------------------- Error states */

/* GF renders the error banner in .gform_validation_errors INSIDE the wrapper
   but OUTSIDE <form>, so this scopes to the shell, not the form. GF already
   draws its own warning glyph in a 48px left gutter - recolour that rather than
   hide it and add a second one. Tint and a 1px border, never a coloured bar
   down one edge. */
.htx-estimate-shell .gform_wrapper.gravity-theme .gform_validation_errors {
  margin: 0 0 28px;
  padding: 16px 16px 16px 48px;
  background: rgba(229, 40, 40, .07);
  border: 1px solid rgba(229, 40, 40, .35);
  border-radius: 0;
  box-shadow: none;
}

.htx-estimate-shell .gform_wrapper.gravity-theme .gform_submission_error {
  margin: 0;
  padding: 0;
  color: var(--htx-danger);
  font-family: "PT Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.htx-estimate-shell .gform_wrapper.gravity-theme .gform_submission_error .gform-icon {
  color: var(--htx-danger);
}

.htx-estimate-shell .gform_wrapper.gravity-theme .gform_validation_errors ol,
.htx-estimate-shell .gform_wrapper.gravity-theme .gform_validation_errors ul {
  margin: 10px 0 0;
  padding: 0 0 0 18px;
}

.htx-estimate-shell .gform_wrapper.gravity-theme .gform_validation_errors li {
  margin: 0 0 4px;
  color: var(--htx-danger);
  font-size: 15px;
}

.htx-estimate-shell .gform_wrapper.gravity-theme .gform_validation_errors a {
  color: var(--htx-danger);
  font-weight: 600;
  text-decoration: underline;
}

.htx-estimate-shell .gform_wrapper.gravity-theme .gform_validation_errors a:hover {
  text-decoration: none;
}

.gravity-theme form.htx-estimate-form .validation_message {
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--htx-danger);
  font-size: 14px;
  font-weight: 600;
}

.htx-estimate-shell .gravity-theme form.htx-estimate-form .gform_fields .gfield_error input[type="text"],
.htx-estimate-shell .gravity-theme form.htx-estimate-form .gform_fields .gfield_error input[type="email"],
.htx-estimate-shell .gravity-theme form.htx-estimate-form .gform_fields .gfield_error input[type="tel"] {
  border-bottom-color: var(--htx-danger);
}

/* -------------------------------------------------------- Confirmation */

/* GF swaps the confirmation in where the form was, so it lands inside the
   panel with the rail still beside it. That's the ending we want - their whole
   operation summarised next to the acknowledgement - so this is flat content,
   not a second card nested inside the first. */
.htx-estimate-confirmation {
  padding: 8px 0 16px;
}

.htx-estimate-confirmation__mark span {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  background: var(--htx-blue) 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E") center / 28px no-repeat;
  border-radius: 50%;
  animation: htx-mark-in .45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes htx-mark-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}

.htx-estimate-confirmation h3 {
  margin: 0 0 12px;
  color: var(--htx-navy);
  font-family: "PT Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
}

.htx-estimate-confirmation p {
  max-width: 56ch;
  margin: 0;
  color: var(--htx-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* =========================================================== Responsive */

@media (max-width: 1023px) {
  .htx-estimate-shell {
    grid-template-columns: 1fr;
  }

  .htx-estimate-panel {
    padding: 36px 32px 32px;
  }

  .htx-rail {
    padding: 28px 32px;
  }

  /* Horizontal spine on narrow screens */
  .htx-rail__steps {
    display: flex;
    margin-bottom: 24px;
  }

  .htx-rail__step {
    flex: 1 1 0;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 8px;
    padding: 0 12px 0 0;
  }

  .htx-rail__step:not(:last-child)::before {
    top: 13px;
    right: 0;
    bottom: auto;
    left: 40px;
    width: auto;
    height: 2px;
  }

  .htx-rail__label {
    font-size: 13px;
  }

  .htx-rail__note {
    display: none;
  }

  .htx-rail__summary {
    margin-top: 4px;
  }

}

@media (max-width: 767px) {
  .htx-estimate-panel {
    padding: 28px 20px 24px;
  }

  .htx-rail {
    padding: 24px 20px;
  }

  .htx-rail__label {
    display: none;
  }

  .htx-rail__step--current .htx-rail__label {
    display: block;
  }

  .gravity-theme form.htx-estimate-form .htx-question .gfield_label,
  .gravity-theme form.htx-estimate-form .gsection_title {
    font-size: 24px;
  }

  .gravity-theme form.htx-estimate-form .gform_fields .gfield.htx-asset {
    grid-column: 1 / -1;
  }

  .gravity-theme form.htx-estimate-form .htx-modules .gfield_checkbox {
    grid-template-columns: 1fr 1fr;
  }

  .gravity-theme form.htx-estimate-form .gform_page_footer,
  .gravity-theme form.htx-estimate-form .gform_footer {
    flex-wrap: wrap;
  }

  .gravity-theme form.htx-estimate-form .gform_page_footer .gform_button,
  .gravity-theme form.htx-estimate-form .gform_page_footer .gform_next_button,
  .gravity-theme form.htx-estimate-form .gform_page_footer .gform_previous_button,
  .gravity-theme form.htx-estimate-form .gform_footer .gform_button {
    flex: 1 1 auto;
    padding: 13px 20px;
  }

  .htx-estimate-confirmation h3 {
    font-size: 24px;
  }
}

@media (max-width: 419px) {
  .gravity-theme form.htx-estimate-form .htx-modules .gfield_checkbox {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gravity-theme form.htx-estimate-form .gform_page,
  .htx-estimate-confirmation__mark span {
    animation: none;
  }

  .htx-estimate-shell *,
  .htx-estimate-shell *::before,
  .htx-estimate-shell *::after {
    transition-duration: .01ms !important;
  }

  .gravity-theme form.htx-estimate-form .htx-modules .gchoice label:hover {
    transform: none;
  }
}

/* =================================================================== Popup */

/* The dialog sits in the browser's top layer, above the sticky header and
   everything else, so no z-index is involved. */
.htx-estimate-dialog {
  --htx-navy: #041B38;
  --htx-blue: #017BC4;
  --htx-light: #EBEEF2;

  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  color: inherit;
}

/* The theme's main.css carries an HTML5-shim reset -
   `article, aside, dialog, ... { display: block }` - and author styles always
   beat the browser's built-in `dialog:not([open]) { display: none }`, whatever
   the specificity. Without this, the closed dialog stays rendered: parked below
   the footer on load, and as a ghost over the page after closing. */
.htx-estimate-dialog:not([open]) {
  display: none;
}

.htx-estimate-dialog::backdrop {
  background: rgba(2, 15, 32, .72);
}

.htx-estimate-dialog__body {
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.htx-estimate-dialog__body:focus {
  outline: 0;
}

/* The navy rail sits on a navy scrim over a dark hero, so without a hairline
   the dialog's left edge dissolves into the page behind. */
.htx-estimate-dialog .htx-estimate-shell {
  max-width: none;
  margin: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px rgba(2, 15, 32, .45);
}

/* One authored moment: the dialog rises in over a fading scrim. */
.htx-estimate-dialog[open] {
  animation: htx-dialog-in .42s cubic-bezier(.16, 1, .3, 1);
}

.htx-estimate-dialog[open]::backdrop {
  animation: htx-backdrop-in .3s ease-out;
}

@keyframes htx-dialog-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes htx-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The page behind shouldn't scroll while the popup is open. */
html.htx-estimate-open {
  overflow: hidden;
}

/* Close sits over the white panel on desktop, so it's navy there. */
.htx-estimate-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--htx-navy);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.htx-estimate-dialog__close:hover {
  background: var(--htx-light);
}

.htx-estimate-dialog__close:focus-visible {
  outline: 3px solid #1696F2;
  outline-offset: -3px;
}

.htx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Below 1024 the rail stacks above the panel, so the close button sits over
   navy and flips to white. */
@media (max-width: 1023px) {
  .htx-estimate-dialog__close {
    color: #fff;
  }

  .htx-estimate-dialog__close:hover {
    background: rgba(255, 255, 255, .12);
  }
}

/* Phones get the whole screen - a floating card with margins leaves too little
   room for a four-step form and an on-screen keyboard. */
@media (max-width: 767px) {
  .htx-estimate-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }

  .htx-estimate-dialog__body {
    height: 100%;
    max-height: 100dvh;
  }

  /* Full-height sheet: without explicit rows the grid shares the spare height
     between rail and panel, leaving a tall empty navy block on step 1. The rail
     hugs its content; the panel takes the rest. */
  .htx-estimate-dialog .htx-estimate-shell {
    grid-template-rows: auto 1fr;
    min-height: 100%;
    box-shadow: none;
  }

  .htx-estimate-dialog__close {
    top: 8px;
    right: 8px;
  }

  .htx-estimate-dialog[open] {
    animation-name: htx-sheet-in;
  }

  @keyframes htx-sheet-in {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .htx-estimate-dialog[open],
  .htx-estimate-dialog[open]::backdrop {
    animation: none;
  }
}

/* ============================================= Narrow-screen rail fixes */

/* When the spine runs horizontally, each step is a column. The columns stretch
   to the tallest one (the current step, which carries its label), and the
   grid's align-items:center then dropped the unlabelled markers ~20px below
   the current one, off their connector lines. Pin everything to the top. */
@media (max-width: 1023px) {
  .htx-rail__steps {
    align-items: flex-start;
  }

  .htx-rail__step {
    align-items: start;
    align-content: start;
  }
}

@media (max-width: 767px) {
  /* Only the current step is named on phones. In a quarter-width column,
     "Your operation" wrapped onto two lines, so it's lifted out of its column
     onto one line along the rail's left edge. Each step column is the same
     width, so -100% per column steps it back to that edge. */
  .htx-rail__steps {
    padding-bottom: 28px;
  }

  .htx-rail__step--current .htx-rail__label {
    position: absolute;
    top: 38px;
    left: 0;
    font-size: 15px;
    white-space: nowrap;
  }

  .htx-rail__step:nth-child(2).htx-rail__step--current .htx-rail__label { left: -100%; }
  .htx-rail__step:nth-child(3).htx-rail__step--current .htx-rail__label { left: -200%; }
  .htx-rail__step:nth-child(4).htx-rail__step--current .htx-rail__label { left: -300%; }

  /* The summary sits above the question on phones. Empty at step 2, and three
     rows plus a heading by step 3, it pushed the question halfway down the
     screen. The answers are on the form itself; desktop keeps the summary. */
  .htx-rail__summary {
    display: none;
  }
}

/* GF nests the text in a second span - <span class="gfield_required">
   <span class="gfield_required gfield_required_text">(Required)</span></span> -
   and theme.min.css makes that inner span italic at (0,4,0). The rules above
   only reach the outer span, so style the inner one directly (Figma: upright).
   The heading variant is re-stated one level deeper so this doesn't flatten it. */
.gravity-theme form.htx-estimate-form .gfield_required .gfield_required_text {
  color: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.gravity-theme form.htx-estimate-form .htx-question .gfield_required .gfield_required_text {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Standalone page only. The theme's page template gives the row `pt-5`
   (3.75rem) above the form but nothing below, so the form sat flush on the
   footer. Mirror the same value underneath. Scoped to .page-introduction so
   the popup's shell, which renders outside the page content, is untouched. */
.page-introduction .htx-estimate-shell {
  margin-bottom: 3.75rem;
}