/*
 * buttons. Two variants, all pills, no shadows:
 *   primary   solid blue          (every solid button, including ones authored orange: white on orange is only
 *                                  2.7:1, so blue is the one main-button colour site-wide)
 *   secondary white, grey hairline (outline buttons)
 * On dark/coloured bands any solid button becomes a white pill (on-dark component, bottom of this file).
 *
 * Ultimate Addons buttons (.ubtn) carry their colours inline and in data-* attributes, and their hover is
 * applied by JS as inline styles, so overrides here need !important. Variant detection uses the authored
 * data attributes (data-bg = fill, data-border-color = outline colour), not the inline style text.
 */
body.wt-site {
  --wt-btn-pad: 13px 24px;
  --wt-btn-size: 15px;
}

/* Shared shape */
body.wt-site :is(
  .ubtn, .vc_btn3, a.button, button.button, input[type=submit], input[type=button],
  .action_button, input.hs-button, .hs-button, .btn_blue a, .btn_white a, .wpcf7-submit
) {
  border-radius: var(--wt-r-pill) !important;
  font-family: var(--wt-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--wt-btn-size) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color var(--wt-fast) var(--wt-ease), border-color var(--wt-fast) var(--wt-ease), color var(--wt-fast) var(--wt-ease) !important;
}
body.wt-site .ubtn {
  padding: var(--wt-btn-pad) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
/* Ultimate's sliding hover layer: replaced by a colour change */
body.wt-site .ubtn .ubtn-hover {
  display: none !important;
}
body.wt-site .ubtn .ubtn-data {
  color: inherit !important;
}

/* Primary: solid buttons + blue-outlined buttons (an author's "main" button) */
body.wt-site :is(
  .ubtn[data-bg^="#"]:not([data-bg="#fff" i]):not([data-bg="#ffffff" i]):not([data-border-color="#ffffff" i]):not([data-border-color="#fff" i]),
  .ubtn[data-bg^="rgba"][data-border-color="#006be8" i],
  .vc_btn3.vc_btn3-style-flat, .vc_btn3.vc_btn3-style-modern, .vc_btn3.vc_btn3-style-classic,
  a.button, button.button, input[type=submit], input.hs-button, .hs-button, .btn_blue a, .wpcf7-submit, .action_button
) {
  background: var(--wt-blue) !important;
  border-color: var(--wt-blue) !important;
  color: #fff !important;
}
body.wt-site :is(
  .ubtn[data-bg^="#"]:not([data-bg="#fff" i]):not([data-bg="#ffffff" i]):not([data-border-color="#ffffff" i]):not([data-border-color="#fff" i]),
  .ubtn[data-bg^="rgba"][data-border-color="#006be8" i],
  .vc_btn3.vc_btn3-style-flat, .vc_btn3.vc_btn3-style-modern, .vc_btn3.vc_btn3-style-classic,
  a.button, button.button, input[type=submit], input.hs-button, .hs-button, .btn_blue a, .wpcf7-submit, .action_button
):is(:hover, :focus-visible) {
  background: var(--wt-blue-700) !important;
  border-color: var(--wt-blue-700) !important;
  color: #fff !important;
}

/* Secondary: every other outline / white button */
body.wt-site :is(
  .ubtn[data-bg^="rgba"]:not([data-border-color="#006be8" i]),
  .ubtn:is([data-bg="#fff" i], [data-bg="#ffffff" i]),
  .vc_btn3.vc_btn3-style-outline, .vc_btn3.vc_btn3-style-outline-custom, .btn_white a
) {
  background: #fff !important;
  border-color: var(--wt-line-strong) !important;
  color: var(--wt-ink) !important;
}
body.wt-site :is(
  .ubtn[data-bg^="rgba"]:not([data-border-color="#006be8" i]),
  .ubtn:is([data-bg="#fff" i], [data-bg="#ffffff" i]),
  .vc_btn3.vc_btn3-style-outline, .vc_btn3.vc_btn3-style-outline-custom, .btn_white a
):is(:hover, :focus-visible) {
  background: var(--wt-tint-blue) !important;
  border-color: var(--wt-blue) !important;
  color: var(--wt-blue) !important;
}

/* HubSpot's embed CSS: input.hs-button.primary.large { border-radius: 7px !important } */
body.wt-site .hbspt-form input.hs-button.primary {
  border-radius: var(--wt-r-pill) !important;
}

body.wt-site :is(.ubtn, .vc_btn3, a.button, input[type=submit], input.hs-button, .btn_blue a, .btn_white a):focus-visible {
  outline: none;
  box-shadow: var(--wt-ring) !important;
}

/* On-dark: a solid button the author outlined in white sits on a coloured band (blue/green). A blue pill would
   vanish into a blue band, so these become white pills with blue text. */
body.wt-site .ubtn[data-bg^="#"]:is([data-border-color="#ffffff" i], [data-border-color="#fff" i]) {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--wt-blue) !important;
}
body.wt-site .ubtn[data-bg^="#"]:is([data-border-color="#ffffff" i], [data-border-color="#fff" i]):is(:hover, :focus-visible) {
  background: var(--wt-tint-blue) !important;
  border-color: var(--wt-tint-blue) !important;
  color: var(--wt-blue-700) !important;
}

/* Icon buttons (Ultimate "separate icon"): the icon is absolutely positioned inside the button, so keep room for it
   on its side and drop Ultimate's separator box. */
body.wt-site .ubtn.ubtn-sep-icon {
  position: relative;
}
body.wt-site .ubtn.ubtn-sep-icon-at-right {
  padding-right: 54px !important;
}
body.wt-site .ubtn.ubtn-sep-icon-at-left {
  padding-left: 54px !important;
}
body.wt-site .ubtn.ubtn-sep-icon .ubtn-icon {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  width: 20px !important;
  height: 20px !important;
  margin: -10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}
body.wt-site .ubtn.ubtn-sep-icon-at-right .ubtn-icon {
  right: 22px !important;
  left: auto !important;
}
body.wt-site .ubtn.ubtn-sep-icon-at-left .ubtn-icon {
  left: 22px !important;
  right: auto !important;
}
body.wt-site .ubtn .ubtn-icon i {
  font-size: 18px !important;
  line-height: 1 !important;
  color: currentColor !important;
}
/* inline (non-separate) icons: a small gap from the label */
body.wt-site .ubtn:not(.ubtn-sep-icon) .ubtn-icon {
  margin-right: 8px;
}

/* Inline-styled CTAs pasted into blog posts (posts only: builder pages use inline backgrounds on tab links etc.) (<a style="background:#1ab071 …">BOOK A FREE DEMO</a>):
   primary pill, sentence case. */
body.wt-site :is(.single-post .entry-content, .single-post .page_inner_content) a[style*="background"]:not(.ubtn-link):not([class*="button"]) {
  display: inline-block;
  background: var(--wt-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--wt-r-pill) !important;
  padding: 13px 24px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  text-transform: lowercase !important;
  box-shadow: none !important;
}
body.wt-site :is(.single-post .entry-content, .single-post .page_inner_content) a[style*="background"]:not(.ubtn-link):not([class*="button"])::first-letter {
  text-transform: uppercase;
}
body.wt-site :is(.single-post .entry-content, .single-post .page_inner_content) a[style*="background"]:not(.ubtn-link):not([class*="button"]):hover {
  background: var(--wt-blue-700) !important;
}
/* other squarish one-offs found by the audit */
body.wt-site :is(a.cta_btn, button.facetwp-load-more) {
  border-radius: var(--wt-r-pill) !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* Any button the on-dark component (js/components/on-dark.js) finds sitting on a dark/coloured background:
   white pill, blue text. Anchored on #Wrapper so it outranks every variant rule above. */
body.wt-site #Wrapper .wt-on-dark {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--wt-blue) !important;
}
body.wt-site #Wrapper .wt-on-dark:is(:hover, :focus-visible) {
  background: var(--wt-tint-blue) !important;
  border-color: var(--wt-tint-blue) !important;
  color: var(--wt-blue-700) !important;
}
body.wt-site #Wrapper .wt-on-dark :is(.ubtn-text, .ubtn-data, i) {
  color: inherit !important;
}

/* Mobile tap targets: every button at least 44px tall */
@media (max-width: 767px) {
  body.wt-site :is(.ubtn, .vc_btn3, a.button, button.button, input[type=submit], input[type=button], .action_button, .hs-button) {
    min-height: var(--wt-tap-min);
  }
  body.wt-site .ubtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Ultimate buttons: the <a> is a transparent wrapper around the styled <button>, but ships 24px side padding,
   so left-aligned buttons sit indented from the text above them (e.g. /industries/banking/ on mobile) */
body.wt-site .ubtn-ctn-left > a.ubtn-link {
  padding-left: 0 !important;
  padding-right: 0 !important;
}