/* ====================================================================
   forms.css - site-wide Gravity Forms layer (central CSS step 4, 2026-10-12, hover colour 2026-10-13).
   Loaded on every page after base.css and before landing.css / the per-page WPBakery CSS,
   so page- and form-specific rules still win.
   Why: Gravity Forms 2.5+ renders the submit as <button class="gform_button button"> and its
   "gravity-theme" (no-framework) deliberately leaves that button to the site. The site never
   styled the button itself (the old rules targeted input[type=submit]), so every form shows the
   browser's default bevelled grey button (blue gradient on iOS). The fake two-column "left label"
   event forms (empty HTML spacer fields + 60/40 widths) collapse badly below 768px.
   The rules below generalise the fix the site owner applied by hand to the Ivoclar page (35569)
   on live in August 2026.
   ==================================================================== */

/* ---- 1. Submit button: house style = the newest user design (form 153, generic lead form) ---- */
.gform_wrapper.gravity-theme .gform_footer .gform_button,
.gform_wrapper.gravity-theme .gform_page_footer .gform_button,
.gform_wrapper.gravity-theme .gform_footer input[type=submit] {
  -webkit-appearance: none;
  appearance: none;
  background: #17265c;
  background-image: none;
  border: 1px solid #17265c;
  border-radius: 12px;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.gform_wrapper.gravity-theme .gform_footer .gform_button:hover,
.gform_wrapper.gravity-theme .gform_footer .gform_button:focus-visible {
  background: #baaa70;      /* house gold (owner's decision 2026-10-13); navy text for contrast */
  border-color: #baaa70;
  color: #17265c;
}
.gform_wrapper.gravity-theme .gform_footer .gform_button:disabled { opacity: .6; cursor: default; }

/* ---- 2. Landing pages (dark backgrounds): the white button the per-page CSS always intended ---- */
body.ia-landing .gform_wrapper.gravity-theme .gform_footer .gform_button,
body.ia-landing .gform_wrapper.gravity-theme .gform_footer input[type=submit] {
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 5px;
  color: #1e2b5b;
  font-size: 16px;
  padding: 10px;
  margin: auto;
  display: block;
}
body.ia-landing .gform_wrapper.gravity-theme .gform_footer .gform_button:hover,
body.ia-landing .gform_wrapper.gravity-theme .gform_footer .gform_button:focus-visible {
  background: #baaa70;
  border-color: #baaa70;
  color: #17265c;
}

/* ---- 3. Mobile: fake two-column "left label" forms ---- */
@media (max-width: 767px) {
  /* empty HTML spacer fields (class added by inc/forms.php) only make empty rows on one column */
  .gform_wrapper.gravity-theme .gfield--type-html.ia-spacer { display: none !important; }
  /* calculated totals: label and amount on one line, amount right-aligned and never wrapped */
  .gform_wrapper.gravity-theme .gfield_calculation,
  .gform_wrapper.gravity-theme .gfield--type-product.gfield--input-type-calculation,
  .gform_wrapper.gravity-theme .gfield--type-total {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 12px;
    margin-top: 8px;
  }
  .gform_wrapper.gravity-theme .gfield_calculation > .gfield_label,
  .gform_wrapper.gravity-theme .gfield--type-product.gfield--input-type-calculation > .gfield_label,
  .gform_wrapper.gravity-theme .gfield--type-total > .gfield_label {
    width: auto !important;
    max-width: none !important;
    padding-top: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
  }
  .gform_wrapper.gravity-theme .gfield_calculation > .ginput_container,
  .gform_wrapper.gravity-theme .gfield--type-product.gfield--input-type-calculation > .ginput_container,
  .gform_wrapper.gravity-theme .gfield--type-total > .ginput_container {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    overflow: visible;
  }
  .gform_wrapper.gravity-theme .gfield_calculation > .ginput_container input {
    width: auto !important;
    max-width: 120px;
    text-align: right !important;
    padding-right: 0;
  }
  .gform_wrapper.gravity-theme .gfield--type-product.gfield--input-type-calculation .ginput_product_price { padding-left: 0 !important; }
}