/* =========================================
   DigitalBina Inline Ticker — FINAL CSS
   ========================================= */

/* --- Wrapper & viewport (overflow safety) --- */
.dbit-ticker {
  width: 100%;
  max-width: 100%;
  overflow: hidden;           /* prevent any horizontal bleed */
  box-sizing: border-box;
  display: flex;
  align-items: center;        /* adjustable via Elementor control */
  min-width: 0;               /* don’t push sibling columns */
}

.dbit-ticker-viewport {
  overflow: hidden;           /* double guard */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* avoid flex-induced overflow in some themes */
.dbit-ticker-track { min-width: 0; }

/* optional uppercase toggle */
.dbit-ticker.text-upper { text-transform: uppercase; }

/* --- Track & items --- */
.dbit-ticker-track {
  display: flex;              /* flex avoids inline whitespace nodes */
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  /* GAP between items is controlled by Elementor's "Gap" control via inline style */
}

.dbit-ticker-item,
.dbit-ticker-sep {
  display: inline-flex;
  align-items: center;
  /* font-size & typography inherit from Elementor controls */
}

/* Per-item color (via inline style from widget) */
.dbit-ticker-item { color: var(--dbit-item-color, inherit); }

/* Links inherit color; underline on hover */
.dbit-ticker-item a {
  color: inherit;
  text-decoration: none;
}
.dbit-ticker-item a:hover { text-decoration: underline; }

/* --- Separator (no layout blow-up) --- */
/* Use MARGIN for visual spacing; padding is forced to 0 to avoid affecting row/column sizing */
.dbit-ticker-sep{
  box-sizing: content-box;
  line-height: 1;                    /* keep height neutral */
  padding: 0 !important;             /* neutralize any old padding */
  margin: 0 var(--dbit-sep-mx, 8px); /* default left/right space; overridable by Elementor control */
  /* color is still controlled by Elementor “Separator Color” */
}

/* --- Animation (autoplay mode) --- */
/* Use a CSS var for animation name so JS can switch to pixel-perfect distance.
   Fallback to percent-based animation if the var isn’t set. */
.dbit-ticker.is-autoplay .dbit-ticker-track {
  animation-name: var(--dbit-anim, dbit-scroll); /* JS can set to dbit-scroll-px */
  animation-duration: var(--dbit-duration, 20s);
  animation-timing-function: var(--dbit-easing, linear);
  animation-iteration-count: var(--dbit-iteration, infinite);
  animation-play-state: var(--dbit-play-state, running);
  animation-direction: var(--dbit-direction, normal);
}

/* Direction & hover pause */
.dbit-ticker.dir-right.is-autoplay .dbit-ticker-track { animation-direction: reverse; }
.dbit-ticker.pause-on-hover:hover .dbit-ticker-track { animation-play-state: paused; }

/* --- Keyframes --- */
/* 1) Percent-based (legacy) — scrolls one duplicated set (50%) */
@keyframes dbit-scroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* 2) Pixel-perfect (preferred) — JS sets --dbit-set to exact px width of one set */
@keyframes dbit-scroll-px {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--dbit-set, 0px)), 0, 0); }
}

/* End of file */