/* ── Scrolling Banner Pro — Front-end Styles ── */

.sb-banner {
  width: 100%;
  height: var(--sb-height, 46px);
  background: var(--sb-bg, #1a1a2e);
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 9999;
  border-bottom: var(--sb-border, none);
  box-sizing: border-box;
}

.sb-banner.sb-top    { position: sticky; top: 0; }
.sb-banner.sb-bottom { position: fixed;  bottom: 0; left: 0; right: 0; }

/* Track: two copies side by side for seamless loop */
.sb-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sb-scroll var(--sb-speed, 35s) linear infinite;
  will-change: transform;
}

.sb-banner[data-pause="1"] .sb-track:hover {
  animation-play-state: paused;
}

@keyframes sb-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Content block */
.sb-content {
  display: inline-flex;
  align-items: center;
  padding-right: var(--sb-gap, 80px);
  white-space: nowrap;
}

/* Individual items */
.sb-item {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: var(--sb-color, #fff);
  font-family: var(--sb-font, inherit);
  font-size: var(--sb-size, 15px);
  font-weight: var(--sb-weight, 500);
  white-space: nowrap;
  transition: opacity .2s;
}

a.sb-item {
  color: var(--sb-color, #fff);
  text-decoration: none;
}
a.sb-item:hover { opacity: .8; }

/* Separator */
.sb-sep {
  display: inline-block;
  padding: 0 6px;
  color: var(--sb-sep-color, #ffffff88);
  font-size: .9em;
  user-select: none;
  pointer-events: none;
}

/* Images */
.sb-img {
  display: inline-block;
  vertical-align: middle;
  max-height: calc(var(--sb-height, 46px) - 12px);
  width: auto;
  object-fit: contain;
}

/* Bottom offset so page content isn't hidden */
body:has(.sb-banner.sb-bottom) {
  padding-bottom: var(--sb-height, 46px);
}