.bb-scc{ width:100%; position:relative; }
.bb-scc__viewport{ overflow:hidden; }
.bb-scc__track{
  display:flex;
  gap: var(--bb-scc-gap, 24px);
  will-change: transform;
  transition: transform .35s ease;
}
.bb-scc__slide{ flex: 0 0 auto; }

.bb-scc__card{
  width:100%;
  border-radius:18px;
  background:#fff;
  box-sizing:border-box;
}

.bb-scc__iconRow{ display:flex; align-items:center; margin-bottom: 18px; }
.bb-scc__iconImg{ display:block; object-fit:contain; }
.bb-scc__badge{
  display:flex;
  align-items:center;
  justify-content:center;
  border: 2px solid #111827;
  border-radius: 999px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}

.bb-scc__heading{
  margin: 0 0 16px;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
}

.bb-scc__divider{
  width: 100%;
  height: 1px;
  margin: 0 0 18px;
  background: #e5e7eb;
}

.bb-scc__text{
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 22px;
}

.bb-scc__callout{
  border-radius: 12px;
  padding: 18px 20px;
}

.bb-scc__calloutTitle{
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 10px;
}

.bb-scc__calloutText{
  font-size: 16px;
  line-height: 1.5;
}

/* Dots */
.bb-scc__dots{
  display:flex;
  justify-content:center;
  gap: 14px;
  margin-top: 18px;
}
.bb-scc__dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 0;
  background: var(--bb-scc-dot-off, #d1d5db);
  cursor:pointer;
}
.bb-scc__dot.is-active{
  background: var(--bb-scc-dot-on, #f15a24);
}

/* Arrows (optional) */
.bb-scc__arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.15);
  background: rgba(255,255,255,.9);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  line-height: 1;
}
.bb-scc__arrow--prev{ left: 10px; }
.bb-scc__arrow--next{ right: 10px; }
.bb-scc__arrow:disabled{ opacity: .35; cursor: default; }

/* Builder friendliness */
.fl-builder-editing .bb-scc__viewport,
.fl-builder-editing .bb-scc__dots,
.fl-builder-editing .bb-scc__arrow{
  pointer-events:none !important;
}
/* Keep viewport normal */
.bb-scc__viewport{
  overflow: hidden;
}

/* ✅ Center the card within each slide */
.bb-scc__slide{
  display: flex;
  justify-content: center;
}

/* ✅ If your card has a max-width, this ensures it actually centers */
.bb-scc__card{
  margin-left: auto;
  margin-right: auto;
}

/* Track should size to content so it can be centered */
.bb-scc__track{
  width: max-content;      /* ✅ makes track shrink-wrap slides */
}