/* WT Scroll Text - Horizontal Single-Line (admin-controlled via CSS variables) */

.wtst-wrap{
  max-width: var(--wt-max-width);
  background: var(--wt-bg-color);
  color: var(--wt-text-color);
  padding: var(--wt-pad);
  border: var(--wt-border-width) solid var(--wt-border-color);
  border-radius: var(--wt-border-radius);
  box-sizing: border-box;
  font-size: var(--wt-font-size);
  line-height: var(--wt-line-height);
}

@media (max-width:768px){
  .wtst-wrap{ font-size: var(--wt-mobile-font); }
}

/* Horizontal ticker */
.wtst-h{
  overflow: hidden;
  white-space: nowrap;
}

.wtst-h-inner{
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation-duration: var(--wt-speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.wtst-left .wtst-h-inner{ animation-name: wtstScrollLeft; }
.wtst-right .wtst-h-inner{ animation-name: wtstScrollRight; }

.wtst-h-text{
  display: inline-block;
  white-space: nowrap;
  padding-right: 60px;
}

/* Separator (if you include | in your text, it will inherit text color; this is for optional span separators) */
.wtst-sep{ color: var(--wt-sep-color); }

/* Pause: desktop hover */
@media (hover:hover) and (pointer:fine){
  .wtst-pause:hover .wtst-h-inner{ animation-play-state: paused; }
}

/* Pause: tap/click toggled by JS */
.wtst-paused .wtst-h-inner{ animation-play-state: paused; }

/* Keyframes */
@keyframes wtstScrollLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}

@keyframes wtstScrollRight{
  from{ transform: translateX(-100%); }
  to{ transform: translateX(0); }
}