/**
 * Gallery Marquee Widget Styles
 *
 * @package HelloElementorChild
 */

/* Marquee wrapper - hides overflow */
.mealplanet-marquee-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Track - flex container for seamless loop */
.mealplanet-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--mealplanet-gap, 20px);
  animation: mealplanet-marquee-scroll var(--mealplanet-speed, 30s) linear
    infinite;
}

/* Reverse direction for right-to-left */
.mealplanet-marquee-wrapper.mealplanet-marquee-direction-right
  .mealplanet-marquee-track {
  animation-direction: reverse;
}

/* Pause animation on hover */
.mealplanet-marquee-wrapper.mealplanet-marquee-pause-hover:hover
  .mealplanet-marquee-track {
  animation-play-state: paused;
}

/* Content block - each contains the full gallery for seamless loop */
.mealplanet-marquee-content {
  display: flex;
  flex-shrink: 0;
  gap: var(--mealplanet-gap, 20px);
  align-items: center;
}

/* Individual image item */
.mealplanet-marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.mealplanet-marquee-item img {
  display: block;
  vertical-align: middle;
}

/* Marquee scroll animation (segments: 1 = mobile, 2+ = desktop clone) */
@keyframes mealplanet-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc((-100% - var(--mealplanet-gap)) / var(--mealplanet-segments, 1)));
  }
}