/* The shared Gravity Forms skin (Orbital theme markup). Every tool form looks the same. */

.fo-tool__form .gform_wrapper {
  --gf-color-primary: #0E6B5C;
  --gf-color-primary-contrast: #FFFFFF;
  --gf-color-primary-darker: #0A4F44;
  --gf-color-in-ctrl: #16191D;
  --gf-ctrl-border-color: #D6D3CA;
  --gf-ctrl-radius: 10px;
  --gf-ctrl-btn-radius: 12px;
  --gf-ctrl-size: 52px;
  --gf-font-size-primary: 17px;
  --gf-form-gap-y: 18px;
  --gf-label-font-weight-primary: 700;
  --gf-label-font-size-primary: 14px;
  --gf-ctrl-btn-bg-color-primary: #16191D;
  --gf-ctrl-btn-bg-color-hover-primary: #000000;
  --gf-ctrl-btn-border-color-primary: #16191D;
  --gf-ctrl-btn-border-color-hover-primary: #000000;
  --gf-ctrl-btn-color-primary: #FFFFFF;
  --gf-ctrl-btn-font-weight: 700;
  --gf-ctrl-btn-size: 48px;
  --gf-ctrl-btn-bg-color-secondary: #F1EFE9;
  --gf-ctrl-btn-bg-color-hover-secondary: #E3E1DA;
  --gf-ctrl-btn-border-color-secondary: #F1EFE9;
  --gf-ctrl-btn-color-secondary: #16191D;
}
.fo-tool__form .gform_wrapper,
.fo-tool__form .gform_wrapper .gform_fields { font-family: var(--font-body); }
.fo-tool__form .gform_wrapper .gform_fields { display: grid; gap: 18px; }
.fo-tool__form .gform_wrapper .gfield_label { color: var(--ink); }
.fo-tool__form .gform_wrapper .gfield_description { font-size: 12px; color: var(--muted); }

/* Numbers in the mono face */
.fo-tool__form .gform_wrapper input[type="number"],
.fo-tool__form .gform_wrapper input[type="text"].ginput_amount,
.fo-tool__form .gform_wrapper .ginput_container_number input,
.fo-tool__form .gform_wrapper .ginput_container_calculation input,
.fo-tool__form .gform_wrapper .ginput_product_price,
.fo-tool__form .gform_wrapper .ginput_total {
  font-family: var(--font-mono);
  font-weight: 500;
}
.fo-tool__form .gform_wrapper input:focus,
.fo-tool__form .gform_wrapper select:focus,
.fo-tool__form .gform_wrapper textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

/* Result: any calculation field (or an HTML field) carrying the "fo-result" CSS class
   renders as the teal result panel. The first result in a form is the headline number. */
.fo-tool__form .gform_wrapper .gfield.fo-result {
  background: var(--teal);
  color: var(--white);
  border-radius: var(--radius-panel);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fo-tool__form .gform_wrapper .gfield.fo-result .gfield_label {
  color: var(--teal-pale);
  font-size: 14px;
  font-weight: 600;
}
.fo-tool__form .gform_wrapper .gfield.fo-result input,
.fo-tool__form .gform_wrapper .gfield.fo-result .ginput_container {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--white);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--result);
  letter-spacing: -0.02em;
  line-height: 1.1;
  height: auto;
  min-height: 0;
  box-shadow: none;
  pointer-events: none;
}
.fo-tool__form .gform_wrapper .gfield.fo-result .gfield_description { color: var(--teal-pale); }

/* Secondary results: smaller, in a row of two */
.fo-tool__form .gform_wrapper .gfield.fo-result--sub {
  background: var(--teal-dark);
  padding: 14px 18px;
  border-radius: var(--radius-btn);
}
.fo-tool__form .gform_wrapper .gfield.fo-result--sub input { font-size: 20px; }

/* Segmented choice (radio) fields with the "fo-segmented" class */
.fo-tool__form .gform_wrapper .gfield.fo-segmented .gfield_radio {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--field);
  border-radius: var(--radius-btn);
}
.fo-tool__form .gform_wrapper .gfield.fo-segmented .gchoice { position: relative; }
.fo-tool__form .gform_wrapper .gfield.fo-segmented .gchoice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fo-tool__form .gform_wrapper .gfield.fo-segmented .gchoice label {
  display: flex; align-items: center; justify-content: center;
  height: 44px; margin: 0; padding: 0 6px;
  border-radius: 9px;
  font-weight: 700; font-size: 15px; color: var(--ink-soft);
}
.fo-tool__form .gform_wrapper .gfield.fo-segmented .gchoice input:checked + label { background: var(--white); color: var(--teal); box-shadow: var(--shadow-seg); }
.fo-tool__form .gform_wrapper .gfield.fo-segmented .gchoice input:focus-visible + label { outline: 2px solid var(--teal); }

/* Submit row for the few tools that do submit (PDF / email results) */
.fo-tool__form .gform_wrapper .gform_footer { margin-top: 4px; }

/* Print: just the form and result */
@media print {
  .fo-header, .fo-footer, .fo-tool__actions, .fo-ad, .fo-tool__side, .fo-tool__panel-mobile,
  .fo-tool__sponsored-mobile, .fo-tool__related-mobile, .fo-crumbs { display: none !important; }
  body { background: #fff; }
  .fo-tool__form .gform_wrapper .gfield.fo-result { background: #0E6B5C !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Contact forms on prose pages */
.fo-prose .fo-contact { margin: 20px 0 28px; padding: 20px 16px; }
.fo-prose .fo-contact .gform_wrapper .gform_footer .gform_button { width: 100%; }
@media (min-width: 760px) { .fo-prose .fo-contact { padding: 24px; } .fo-prose .fo-contact .gform_wrapper .gform_footer .gform_button { width: auto; min-width: 200px; } }
.fo-prose .fo-contact .gform_required_legend, .fo-prose .fo-contact .gfield_required { display: none; }