/*
 * tabs and accordions. Styling only: the interactive behaviour (WPBakery vc_tta JS, jQuery-UI tabs,
 * Betheme accordion) is untouched, so every tab/panel still switches exactly as before.
 *
 *  - WPBakery tabs   .vc_tta-tabs   -> segmented pill control + bordered panel
 *  - WPBakery accordion .vc_tta-accordion -> stacked bordered cards, +/- chip on the right
 *  - jQuery-UI tabs  .wpb_tabs      -> same pill control
 *  - Betheme FAQ     .mfn-acc       -> stacked bordered cards
 */

/* ---- WPBakery tabs ---------------------------------------------------------------------------------------- */
body.wt-site .vc_tta-tabs .vc_tta-tabs-container {
  margin-bottom: 20px !important;
}
body.wt-site .vc_tta.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-container .vc_tta-tabs-list,
body.wt-site .vc_tta-tabs .vc_tta-tabs-list {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px !important;
  background: var(--wt-track);
  border-radius: var(--wt-r-pill);
  border: 0 !important;
}
body.wt-site .vc_tta-tabs .vc_tta-tabs-list::before,
body.wt-site .vc_tta-tabs .vc_tta-tabs-list::after {
  display: none !important;
}
body.wt-site .vc_tta-tabs .vc_tta-tab {
  margin: 0 !important;
}
body.wt-site .vc_tta-tabs .vc_tta-tab > a {
  display: block;
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: var(--wt-r-pill) !important;
  background: transparent !important;
  color: var(--wt-text) !important;
  font-family: var(--wt-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  transition: background-color var(--wt-fast) var(--wt-ease), color var(--wt-fast) var(--wt-ease), box-shadow var(--wt-fast) var(--wt-ease);
}
body.wt-site .vc_tta-tabs .vc_tta-tab > a:hover {
  color: var(--wt-ink) !important;
}
/* page content ships `.vc_tta-tabs:not(..):not(..).vc_tta-tabs-position-top .vc_tta-tab.vc_active > a {orange !important}`
   (6 classes), so the active rule needs 7 */
body.wt-site .vc_tta.vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-list .vc_tta-tab.vc_active > a,
body.wt-site .vc_tta-tabs .vc_tta-tab.vc_active > a {
  background: #fff !important;
  color: var(--wt-ink) !important;
  box-shadow: inset 0 0 0 1px var(--wt-line) !important;
}
body.wt-site .vc_tta-tabs .vc_tta-tab > a .vc_tta-title-text {
  color: inherit !important;
}
/* the panel area */
body.wt-site .vc_tta-tabs .vc_tta-panels-container .vc_tta-panels {
  background: var(--wt-tint-blue) !important;
  border: 1px solid var(--wt-line) !important;
  border-radius: var(--wt-r-xl) !important;
  overflow: hidden;
}
body.wt-site .vc_tta-tabs .vc_tta-panel .vc_tta-panel-body {
  background: transparent !important;
  border: 0 !important;
  padding: 40px 40px 32px !important;
}
/* at mobile widths vc_tta-tabs renders its panels as an accordion: let the accordion rules below apply */
body.wt-site .vc_tta-tabs .vc_tta-panel-heading {
  border-radius: var(--wt-r-md) !important;
}
/* solution chips inside the home tabs (.btn__tabs buttons): compact, left-aligned pills */
body.wt-site .vc_tta-tabs a.ubtn-link.btn__tabs {
  display: block;
}
body.wt-site .vc_tta-tabs .btn__tabs .ubtn {
  width: 100% !important;
  justify-content: flex-start;
  text-align: left;
  font-weight: 500 !important;
  padding: 12px 18px !important;
}
body.wt-site .vc_tta-tabs .btn__tabs {
  margin-bottom: 10px !important;
}
body.wt-site .vc_tta-tabs h4 {
  color: var(--wt-ink);
  margin-bottom: 20px;
}

/* ---- WPBakery accordions ----------------------------------------------------------------------------------
   Selectors carry .vc_tta.vc_general.vc_tta-accordion to beat the legacy
   `.page .vc_tta-color-blue.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-heading {... !important}` (5 classes).
   Coloured (blue/grey/flat) accordions all become the same white bordered cards. */
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel {
  background: #fff;
  border: 1px solid var(--wt-line);
  border-radius: var(--wt-r-md);
  margin-bottom: 10px !important;
  overflow: hidden;
  transition: border-color var(--wt-fast) var(--wt-ease);
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel:hover,
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel.vc_active {
  border-color: var(--wt-line-strong);
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel .vc_tta-panel-heading,
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel .vc_tta-panel-body {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-title {
  font-family: var(--wt-font-body) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-title > a {
  position: relative;
  display: block;
  padding: 20px 64px 20px 24px !important;
  color: var(--wt-ink) !important;
  background: transparent !important;
  font-size: inherit !important; /* vc_tta-color-blue sets 14px on the link */
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-title > a .vc_tta-title-text {
  color: inherit !important;
  font: inherit !important;
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-body {
  padding: 0 24px 22px !important;
  color: var(--wt-text) !important; /* coloured accordion styles set white text */
  font-size: 15px;
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-body > :first-child {
  margin-top: 0;
}
/* +/- icon: tinted chip on the right */
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-controls-icon {
  position: absolute !important;
  left: auto !important;
  right: 22px !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin-top: -14px !important;
  transform: none !important;
  border-radius: 50%;
  background: var(--wt-track);
  color: var(--wt-muted);
  transition: background-color var(--wt-fast) var(--wt-ease), color var(--wt-fast) var(--wt-ease);
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-controls-icon::before,
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-controls-icon::after {
  border-color: currentColor !important;
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-controls-icon-plus::before {
  left: 9px !important;
  right: 9px !important;
  border-width: 1.5px 0 0 !important;
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-controls-icon-plus::after {
  top: 9px !important;
  bottom: 9px !important;
  border-width: 0 0 0 1.5px !important;
}
body.wt-site .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-controls-icon {
  background: var(--wt-tint-blue-2);
  color: var(--wt-blue);
}

/* ---- jQuery-UI tabs (contact page) ------------------------------------------------------------------------ */
body.wt-site .wpb_tabs .wpb_tabs_nav {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px !important;
  background: var(--wt-track) !important;
  border: 0 !important;
  border-radius: var(--wt-r-pill);
  margin-bottom: 20px !important;
}
body.wt-site .wpb_tabs .wpb_tabs_nav li {
  float: none !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.wt-site .wpb_tabs .wpb_tabs_nav li a {
  display: block;
  padding: 10px 20px !important;
  border-radius: var(--wt-r-pill) !important;
  background: transparent !important;
  color: var(--wt-text) !important;
  font-weight: 500 !important;
  border: 0 !important;
}
body.wt-site .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a {
  background: #fff !important;
  color: var(--wt-ink) !important;
  box-shadow: inset 0 0 0 1px var(--wt-line) !important;
}
body.wt-site .wpb_tabs .wpb_tab {
  border: 1px solid var(--wt-line) !important;
  border-radius: var(--wt-r-lg) !important;
  background: #fff !important;
  padding: 28px !important;
}

/* ---- Betheme accordion / FAQ ------------------------------------------------------------------------------ */
body.wt-site .mfn-acc .question {
  background: #fff !important;
  border: 1px solid var(--wt-line) !important;
  border-radius: var(--wt-r-md) !important;
  margin-bottom: 10px !important;
  overflow: hidden;
  box-shadow: none !important;
}
body.wt-site .mfn-acc .question .title {
  color: var(--wt-ink) !important;
  font-weight: 600;
  background: transparent !important;
  border: 0 !important;
}
body.wt-site .mfn-acc .question .answer {
  background: transparent !important;
  border: 0 !important;
  color: var(--wt-text);
}

/* ---- Elegant Tabs plugin (.et-tabs: KYC, healthcare, Spectra, reporting pages) ---------------------------------
   The plugin writes each tab's colours inline and in generated CSS with ~10-class !important selectors, so these
   rules are anchored on #Wrapper (an id outranks any class chain) and use !important. Same language as the WPBakery tabs: segmented pill track, white active chip, tinted bordered panel. */
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container {
  gap: 2px;
  padding: 4px !important;
  margin: 0 0 20px !important;
  background: var(--wt-track) !important;
  border-radius: var(--wt-r-lg);
  border: 0 !important;
}
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container > li {
  background: transparent !important;
  border: 0 !important;
  border-radius: calc(var(--wt-r-lg) - 4px);
  margin: 0 !important;
  box-shadow: none !important;
}
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container > li > a {
  background: transparent !important;
  color: var(--wt-text) !important;
  border: 0 !important;
  border-radius: inherit;
  padding: 12px 16px !important;
  box-shadow: none !important;
  transition: background-color var(--wt-fast) var(--wt-ease), color var(--wt-fast) var(--wt-ease);
}
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container > li > a::before,
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container > li > a::after,
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container > li::before,
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container > li::after {
  display: none !important; /* the "bars" style draws coloured strips */
}
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container > li:hover > a {
  color: var(--wt-ink) !important;
}
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container > li.tab-current {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--wt-line) !important;
}
body.wt-site #Wrapper .et-tabs .elegant-tabs-list-container > li.tab-current > a {
  color: var(--wt-ink) !important;
}
body.wt-site #Wrapper .et-tabs :is(.et-tab-title, .et-tab-sub-title) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: inherit !important;
}
body.wt-site #Wrapper .et-tabs .et-tab-title {
  font-size: 15px !important;
  font-weight: 600 !important;
}
body.wt-site #Wrapper .et-tabs .et-tab-sub-title {
  font-size: 13px !important;
  font-weight: 400 !important;
  opacity: 0.8;
}
/* panels: tinted, bordered, ink text (authored white text re-inked) */
body.wt-site #Wrapper .et-tabs .et-content-wrap section,
body.wt-site #Wrapper .et-tabs section.content-current {
  background: var(--wt-tint-blue) !important;
  border: 1px solid var(--wt-line) !important;
  border-radius: var(--wt-r-xl) !important;
  color: var(--wt-text) !important;
  box-shadow: none !important;
  padding: 40px !important;
}
@media (max-width: 767px) {
  body.wt-site #Wrapper .et-tabs .et-content-wrap section,
  body.wt-site #Wrapper .et-tabs section.content-current {
    padding: 20px !important;
  }
}
body.wt-site #Wrapper .et-tabs section :is(h1, h2, h3, h4, h5, h6) {
  color: var(--wt-ink) !important;
}
body.wt-site #Wrapper .et-tabs section :is(p, li, span, div, strong) {
  color: inherit;
}
body.wt-site #Wrapper .et-tabs section [style*="color:#fff" i],
body.wt-site #Wrapper .et-tabs section [style*="color: #fff" i],
body.wt-site #Wrapper .et-tabs section [style*="color:#ffffff" i],
body.wt-site #Wrapper .et-tabs section [style*="color: #ffffff" i],
body.wt-site #Wrapper .et-tabs section [style*="color: rgb(255, 255, 255)"] {
  color: var(--wt-ink) !important;
}

/* Legacy Ultimate advanced tabs left in the content next to the Elegant Tabs that replaced them (e.g. /solutions/queue-management-system/).
   Prod hid them with an inline footer script that deletes every div[style] with display:block + clear:both; that script is not ours to rely on,
   so drop the old tabs (desktop .ult_tabs and its mobile .ult_acord accordion; Ultimate's JS sets inline display, hence !important). */
body.wt-site .wpb_wrapper:has(> .elegant-tabs-container) > :is(.ult_tabs, .ult_acord) {
  display: none !important;
}

/* Mobile: Ultimate tab menus (ult_tabs) stack one label per row (~40px each); show them as a swipeable chip row */
@media (max-width: 767px) {
  body.wt-site .ult_tabs ul.ult_tabmenu {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0 4px !important;
    margin: 0 0 16px !important;
  }
  body.wt-site .ult_tabs ul.ult_tabmenu > li.ult_tab_li {
    flex: 0 0 auto;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }
  body.wt-site .ult_tabs ul.ult_tabmenu > li.ult_tab_li > a {
    display: flex !important;
    align-items: center;
    min-height: 40px;
    padding: 0 14px !important;
    white-space: nowrap;
    border: 1px solid var(--wt-line);
    border-radius: var(--wt-r-pill);
  }
}

/* Desktop/tablet: Ultimate tab labels are fixed-width (li width:25%) and nowrap, so long translated labels (/es/, /it/, /fr/) run into each other */
@media (min-width: 768px) {
  body.wt-site .ult_tabs ul.ult_tabmenu > li.ult_tab_li > a {
    white-space: normal !important;
    line-height: 1.3 !important;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  body.wt-site .ult_tabs ul.ult_tabmenu > li.ult_tab_li > a .ult_tab_display_text {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* Elegant Tabs mobile <select>: 36px fixed height with 11px padding clips the label */
body.wt-site .elegant-tabs-nav select.et-mobile-tabs {
  height: auto !important;
  min-height: 44px;
  padding: 10px 40px 10px 14px !important;
  line-height: 1.4 !important;
}