/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Feb 01 2026 | 22:57:28 */
/* -------------------------------------------------------
   CitySports: BuddyBoss-style underline tabs
   (transparent background + underline active)
------------------------------------------------------- */

.csm-bb-tab-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  gap: 22px;              /* BuddyBoss-like spacing */
  flex-wrap: wrap;
}

.csm-bb-tab {
  background: transparent;
  border: 0;
  padding: 10px 0;
  margin: 0;
  cursor: pointer;

  font-family: "Arial Narrow", helvetica, sans-serif;
  font-size: 15px;        /* closer to BuddyBoss */
  font-weight: 300;
  color: rgba(0,0,0,.70);

  position: relative;     /* for underline */
  transition: color .15s ease;
}

.csm-bb-tab:hover {
  color: rgba(0,0,0,.92);
}

.csm-bb-tab.is-active {
  color: var(--bb-primary-color, #0E0EAB); /* will match BB if var exists */
}

/* underline indicator */
.csm-bb-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;           /* sits on the list's border-bottom */
  width: 100%;
  height: 2px;
  background: var(--bb-primary-color, #0E0EAB);
  border-radius: 2px;
}

/* content panel should NOT look like a "tab folder" */
.csm-bb-tab-content {
  display: none;
  padding: 0;             /* BuddyBoss usually doesn't box it */
  border: 0;
  border-radius: 0;
  background: transparent;
}

.csm-bb-tab-content.is-active {
  display: block;
}

/* Optional: if your shortcode output needs breathing room */
.csm-bb-tab-content.is-active > :first-child {
  margin-top: 6px;
}


/* BuddyBoss exact active-tab match: black + bold */
.csm-bb-tabs .csm-bb-tab.is-active {
  color: #000 !important;      /* BuddyBoss active = black */
  font-weight: 700;            /* Bold active tab */
}

/* Keep underline color consistent (optional but authentic) */
.csm-bb-tabs .csm-bb-tab.is-active::after {
  background: #000;
}

