/*!
 * Mart24 Premium Announcement Bar — Milestone 2, Phase 3 (Frontend)
 * -------------------------------------------------------------------
 * Mobile-first. Extends the Milestone 1 design tokens (mart24-components.css)
 * rather than hardcoding new values.
 *
 * Mobile / tablet (<1280px): native horizontal scroll, swipeable, with
 * CSS scroll-snap. No auto-scroll — the user drives it, so there's nothing
 * to "pause".
 *
 * Desktop (>=1280px): continuous CSS-only marquee (translateX keyframe
 * animation) with `animation-play-state: paused` on hover — zero JS
 * required for the core autoplay/pause-on-hover behaviour.
 */

.mart24-announcement-bar {
  background: var(--mart24-ink, #010f1c);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mart24-announcement-bar__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.mart24-announcement-bar__viewport::-webkit-scrollbar {
  display: none;
}

.mart24-announcement-bar__track {
  display: flex;
  align-items: center;
  gap: var(--mart24-space-6, 32px);
  padding: var(--mart24-space-2, 8px) var(--mart24-space-4, 16px);
  width: max-content;
}

.mart24-announcement-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--mart24-space-2, 8px);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--mart24-fs-xs, 12px);
  font-weight: 600;
  scroll-snap-align: start;
}

.mart24-announcement-bar__icon {
  color: var(--mart24-announcement-color, var(--mart24-primary, #0989ff));
  font-size: 15px;
  line-height: 1;
}

.mart24-announcement-bar__title {
  font-family: var(--mart24-font-bn, inherit);
}

.mart24-announcement-bar__text {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 400;
}

.mart24-announcement-bar__btn {
  display: inline-block;
  padding: 2px var(--mart24-space-2, 8px);
  border-radius: var(--mart24-radius-pill, 999px);
  background: var(--mart24-announcement-color, var(--mart24-primary, #0989ff));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

a.mart24-announcement-bar__item:hover .mart24-announcement-bar__title {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Desktop: CSS-only marquee (autoplay + pause-on-hover, no JS)        */
/* ------------------------------------------------------------------ */

@media (min-width: 1280px) {
  .mart24-announcement-bar__viewport {
    overflow: hidden;
    scroll-snap-type: none;
  }

  .mart24-announcement-bar__track {
    width: max-content;
    animation: mart24-announcement-marquee 30s linear infinite;
  }

  .mart24-announcement-bar__viewport:hover .mart24-announcement-bar__track,
  .mart24-announcement-bar__track.is-paused {
    animation-play-state: paused;
  }

  /* Respect reduced-motion preferences: fall back to a static, non-scrolling bar. */
  @media (prefers-reduced-motion: reduce) {
    .mart24-announcement-bar__track {
      animation: none;
    }
  }
}

@keyframes mart24-announcement-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* Track content is duplicated once in the Blade partial, so -50%
       lands exactly on the start of the second (identical) copy. */
    transform: translateX(-50%);
  }
}