.bb-tabs {
  background-color: transparent;
  padding: 2rem;
  border-radius: 16px;
}

/* TAB BUTTONS (desktop) */
.bb-tab-labels {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.bb-tab-trigger {
  flex: 1 1 0%;
  text-align: center;
  width: 100%;
  /* fallback for older browsers */
  padding: 0;
  /* keep padding inside the text span */
  position: relative;
  background: #fff;
  border: none;
  font-family: museo-sans, cursive;
  font-weight: 600;
  font-size: 17px;
  /* padding: 20px 18px; */
  cursor: pointer;
  /* border-radius: 8px; */
  transition: background-color 0.2s ease;
  color: var(--wpex-palette-42-color);
  /*gray*/
}

.bb-tab-trigger.active {
  background-color: #fff;
  /* background-color: transparent; */
  color: var(--wpex-palette-40-color);
  /*orange*/
  position: relative;
  padding: 0;
}

.bb-tab-trigger.active::before {
  content: '';
  width: 100%;
  background-color: var(--wpex-palette-83-color);
  /*light beige*/
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease;
}

.bb-tab-trigger-text {
  position: relative;
  padding: 20px 18px;
  display: block;
  white-space: nowrap;
}

.bb-tab-labels .bb-tab-trigger:first-of-type {
  border-top-left-radius: 24px;
}

.bb-tab-labels .bb-tab-trigger:last-of-type {
  border-radius: 0 24px 0 0;
}

.bb-tab-labels .bb-tab-trigger.before-active {
  border-top-right-radius: 24px;
}

.bb-tab-labels .bb-tab-trigger.after-active {
  border-top-left-radius: 24px;
}

.bb-tab-labels .bb-tab-trigger.active::before {
  border-radius: 0 0 24px 24px;
}

.bb-tab-labels .bb-tab-trigger:first-of-type.active::before {
  border-radius: 0 0 24px 0;
}

.bb-tab-labels .bb-tab-trigger:last-of-type.active::before {
  border-radius: 0 0 0 24px;
}

.bb-tab-trigger:focus-visible,
.bb-accordion-trigger:focus-visible {
  color: var(--wpex-palette-39-color);
}

.bb-tab-pane {
  background: #fff;
  display: none;
  padding: 30px;
  border-radius: 0 0 24px 24px;
}

.bb-tab-pane.active {
  display: block;
}

.bb-tab-inner {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
}

.bb-tab-text {
  flex: 1 1 50%;
  min-width: 300px;
}

.bb-tab-text h4 {
  margin: 0;
}

.bb-tab-body {
  margin: 10px 0 35px;
}

.bb-tab-button {
  display: inline-block;
  cursor: pointer;
  -webkit-font-smoothing: inherit;
  text-decoration: none !important;
  text-align: center;
  max-width: 100%;
  padding: var(--wpex-btn-padding);
  transition: .15s all ease;
  background-color: var(--wpex-btn-bg, var(--wpex-accent));
  background-image: var(--wpex-btn-img);
  border-radius: var(--wpex-btn-border-radius);
  border-width: var(--wpex-btn-border-width);
  border-style: var(--wpex-btn-border-style);
  border-color: var(--wpex-btn-border-color, currentColor);
  border-radius: 16px 16px 0px 16px;
  color: var(--wpex-btn-color, var(--wpex-on-accent));
  font-size: var(--wpex-btn-font-size);
  font-family: var(--wpex-btn-font-family);
  font-style: var(--wpex-btn-font-style);
  text-transform: var(--wpex-btn-text-transform);
  letter-spacing: var(--wpex-btn-letter-spacing);
  line-height: var(--wpex-btn-line-height);
  font-weight: var(--wpex-btn-font-weight);
}

.bb-tab-button:hover {
  color: var(--wpex-hover-btn-color, var(--wpex-on-accent-alt));
  background-color: var(--wpex-hover-btn-bg, var(--wpex-accent-alt));
  background-image: var(--wpex-hover-btn-img, var(--wpex-btn-img));
  border-color: var(--wpex-hover-btn-border-color, var(--wpex-btn-border-color, currentColor));
  text-decoration: none;
}

.bb-tab-image {
  flex: 1 1 40%;
  min-width: 250px;
}

.bb-tab-image img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}

/* Hide accordion icon on desktop */
@media (min-width: 1261px) {

  .bb-accordion-trigger,
  .bb-accordion-trigger .icon {
    display: none;
  }
}

/* ----------------------------------------
   MOBILE / ACCORDION STYLES
---------------------------------------- */

@media (max-width: 1260px) {
  .bb-tab-labels {
    display: none;
  }

  .bb-tab-pane {
    display: block;
    border-bottom: 1px solid var(--wpex-palette-83-color);
    margin-bottom: 0;
    border-radius: 0 0 0 0;
  }

  .bb-tab-pane:first-of-type {
    border-radius: 24px 24px 0 0;
  }

  .bb-tab-pane:last-of-type {
    border-radius: 0 0 24px 24px;
  }

  .bb-tab-pane.active {
    display: block;
  }

  .bb-accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    /* padding: 1rem 0; */
    padding: 0 0;
    border-top: 1px solid #ddd;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: #29241B;
    line-height: 160%;
  }

  .bb-accordion-trigger .icon {
    color: var(--wpex-palette-40-color);
    font-size: 2rem;
    font-weight: 300;
    transition: transform 0.3s ease;
    margin-left: 1rem;
  }

  /* Accordion animation */
  .bb-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    padding: 0;
  }

  .bb-tab-pane.open .bb-accordion-content {
    /* large enough for most content */
    max-height: none;
    transition: none;
    opacity: 1;
    padding: 2rem 0 0;
  }

  .bb-tab-inner {
    align-items: baseline;
    flex-direction: column;
    gap: 0;
  }

  .bb-tab-image {
    order: 2;
    margin-top: 1rem;
  }
}