/* modules/promobar/views/css/front.css */
/* @license MIT */
#promobar {
  width: 100%;
  z-index: 1000;
  font-size: 14px;
}

.promobar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
  flex-wrap: wrap;
}

/* === Banner height presets === */
.promobar--pad-compact .promobar__inner {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.promobar--pad-large .promobar__inner {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.promobar__message {
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
}

/* Marquee mode: the scrolling window must span the whole banner, not the
   1200px centered box the static layout uses — otherwise the text never
   travels through the outer part of the (full-width) coloured bar.
   The inner's own horizontal padding is kept, so the CTA and close button
   still breathe away from the edges; the width is what was missing. */
.promobar--scroll .promobar__inner {
  max-width: none;
}

/* Take all the width left on the row (the whole bar when there is no CTA)
   without forcing a wrap, and pin the text's resting position to the left
   edge so the pixel offsets computed in front.js are exact (the inner's
   text-align:center would otherwise shift a message shorter than its box). */
.promobar--scroll .promobar__message {
  /* basis 0, not auto: the text is arbitrarily long and nowrap, so an auto
     basis would count its full width when the row is measured and push the
     CTA onto a second line on narrow screens. With basis 0 the message just
     grows into whatever space is left, keeping the bar one line high. */
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
}

/* === COUNTDOWN – compact badges "01d 06h 57m 31s" === */
.promobar__countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.promobar__cd-item {
  display: inline-flex;
  align-items: center;
  padding: 1px 4px 1px 4px;
  background: #ffffff;
  color: #333;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset, 0 1px 3px rgba(0, 0, 0, 0.12);
  line-height: 1;
  font-weight: 700;
}

/* fixed width number for stability */
.promobar__cd-number {
  min-width: 2ch;
  text-align: right;
}

/* small unit to the right of the number */
.promobar__cd-label {
  margin-left: 0.2rem;
  font-size: 0.75em;
  opacity: 0.9;
  text-transform: none;
  letter-spacing: 0;
}

/* hide any legacy ":" separators if present */
.promobar__cd-separator {
  display: none;
}

/* === CTA === */
.promobar__cta {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid currentColor;
  text-decoration: none;
  font-weight: 600;
}

/* === Button corner presets === */
.promobar__cta--square {
  border-radius: 2px;
}

.promobar__cta--rounded {
  border-radius: 8px;
}

.promobar__cta--pill {
  border-radius: 9999px;
}

.promobar__cta:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* === Close === */
.promobar__close {
  margin-left: 0.25rem;
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

/* === Animations (accessibility: respects prefers-reduced-motion) === */
@media (prefers-reduced-motion: reduce) {
  .promobar--scroll .promobar__marquee,
  .promobar--pulse .promobar__message,
  .promobar--blink .promobar__message {
    animation: none !important;
  }
}

/* Horizontal marquee.
   Start/end offsets and duration are set in px by front.js from the real
   container and text widths (custom properties below). The fallbacks keep
   the original behaviour if the script never runs. Note the two fallback
   values don't share a reference frame (100vw is the viewport, -100% is the
   text's own width): that mismatch is exactly what made the text spend a
   long dead time off-screen on wide viewports, hence the px values. */
.promobar--scroll .promobar__marquee {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: promobar-marquee var(--promobar-marquee-duration, 15s) linear infinite;
}

@keyframes promobar-marquee {
  0% {
    transform: translate3d(var(--promobar-marquee-start, 100vw), 0, 0);
  }
  100% {
    transform: translate3d(var(--promobar-marquee-end, -100%), 0, 0);
  }
}

/* Soft pulse */
.promobar--pulse .promobar__message {
  animation: promobar-pulse 2.5s ease-in-out infinite;
}

@keyframes promobar-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Light blink */
.promobar--blink .promobar__message {
  animation: promobar-blink 1.2s steps(2, start) infinite;
}

@keyframes promobar-blink {
  to {
    visibility: hidden;
  }
}