/* Styles for WooPlus Notice Bars */
/* These rules define the basic appearance and positioning of the
   announcement bars on the front end.  Individual bars set
   colours via inline styles passed from PHP. */
.wooplus-notice-bar {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 999999;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  /* Use a consistent gap between items instead of manual margins on each element.
     A gap simplifies spacing logic and works in both LTR and RTL contexts. */
  gap: 8px;
  /* Allow items to wrap on small screens so content doesn't overflow. */
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
  transition: transform 0.4s ease, opacity 0.4s ease;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.wooplus-notice-top {
  top: 0;
}
.wooplus-notice-bottom {
  bottom: 0;
}
.wooplus-notice-message {
  flex: 1;
  /* Reset margins and rely on the parent gap for horizontal spacing. */
  margin: 0;
}
.wooplus-notice-button {
  display: inline-block;
  padding: 6px 14px;
  /* Remove explicit margins; spacing is handled by flex gap. */
  margin: 0;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.wooplus-notice-icon {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  /* Remove explicit margins; spacing is handled by flex gap. */
  margin: 0;
}
.wooplus-notice-close {
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  /* Remove explicit margins; spacing is handled by flex gap. */
  margin: 0;
}
.wooplus-notice-timer {
  /* Use logical property to push the timer to the end of the row in both LTR and RTL layouts.
     This replaces margin-left:auto which only works in LTR. */
  margin-inline-start: auto;
  font-weight: bold;
  font-family: inherit;
}

/* Simple entrance animations for bars.  These run once to introduce the bar
   onto the page. */
.wooplus-notice-bar.anim-fade {
  animation: wooplus-notice-fade 0.6s forwards;
}
.wooplus-notice-bar.anim-slide {
  animation: wooplus-notice-slide 0.6s forwards;
}
.wooplus-notice-bar.anim-bounce {
  animation: wooplus-notice-bounce 0.8s forwards;
}
.wooplus-notice-bar.anim-jello {
  animation: wooplus-notice-jello 0.8s forwards;
}

/*
 * When a notice bar has an animation selected apply the animation once
 * to the entire bar.  Originally the message and button elements were
 * animated in an infinite loop which resulted in the content fading or
 * sliding out of view every cycle.  Customers reported that the bar
 * appeared to disappear on its own because the repeated animations hid
 * the content briefly.  To provide a stable experience we no longer
 * loop the inner content.  The bar enters with a single animation and
 * then remains static.
 */
/* Intentionally left blank: message and button elements no longer
   receive infinite animations.  See the `.wooplus-notice-bar.anim-*`
   rules above for the entrance animation applied to the bar itself. */

@keyframes wooplus-notice-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wooplus-notice-slide {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@keyframes wooplus-notice-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}
@keyframes wooplus-notice-jello {
  0%, 11.1%, 100% { transform: translateY(0); }
  22.2% { transform: translateY(-4px); }
  33.3% { transform: translateY(0); }
  44.4% { transform: translateY(-2px); }
  55.5% { transform: translateY(0); }
  66.6% { transform: translateY(-1px); }
  77.7% { transform: translateY(0); }
  88.8% { transform: translateY(-0.5px); }
}

/*
 * Repeating animations for notice bar elements.  When a bar has one
 * of the `anim-*` classes the icon, message, timer and button will
 * animate together in a loop.  These loops gently oscillate the
 * content without removing it from view.  The animation durations
 * differ slightly to create a smooth effect.
 */
.wooplus-notice-bar.anim-fade .wooplus-notice-icon,
.wooplus-notice-bar.anim-fade .wooplus-notice-message,
.wooplus-notice-bar.anim-fade .wooplus-notice-timer,
.wooplus-notice-bar.anim-fade .wooplus-notice-button {
  animation: wooplus-notice-fade-loop 3s infinite;
}

@keyframes wooplus-notice-fade-loop {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.wooplus-notice-bar.anim-slide .wooplus-notice-icon,
.wooplus-notice-bar.anim-slide .wooplus-notice-message,
.wooplus-notice-bar.anim-slide .wooplus-notice-timer,
.wooplus-notice-bar.anim-slide .wooplus-notice-button {
  animation: wooplus-notice-slide-loop 2.5s infinite;
}

@keyframes wooplus-notice-slide-loop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.wooplus-notice-bar.anim-bounce .wooplus-notice-icon,
.wooplus-notice-bar.anim-bounce .wooplus-notice-message,
.wooplus-notice-bar.anim-bounce .wooplus-notice-timer,
.wooplus-notice-bar.anim-bounce .wooplus-notice-button {
  animation: wooplus-notice-bounce-loop 2s infinite;
}

@keyframes wooplus-notice-bounce-loop {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.wooplus-notice-bar.anim-jello .wooplus-notice-icon,
.wooplus-notice-bar.anim-jello .wooplus-notice-message,
.wooplus-notice-bar.anim-jello .wooplus-notice-timer,
.wooplus-notice-bar.anim-jello .wooplus-notice-button {
  animation: wooplus-notice-jello-loop 2s infinite;
}

@keyframes wooplus-notice-jello-loop {
  0%, 11.1%, 100% { transform: translateY(0); }
  22.2% { transform: translateY(-4px); }
  33.3% { transform: translateY(0); }
  44.4% { transform: translateY(-2px); }
  55.5% { transform: translateY(0); }
  66.6% { transform: translateY(-1px); }
  77.7% { transform: translateY(0); }
  88.8% { transform: translateY(-0.5px); }
}