.futureblink-announcement-bar {
  padding: 10px;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px 26px;
  z-index: 10;
}

.futureblink-announcement-bar a {
  text-decoration: none;
}

.futureblink-announcement-bar p {
  margin: 0;
}

.futureblink-announcement-bar .title {
  margin: 0;
  font-weight: bold;
  line-height: 1.2;
}

.futureblink-announcement-bar button {
  border: none;
  cursor: pointer;
}

.futureblink-announcement-bar .close-btn {
  background: none;
  right: 10px;
}

.futureblink-announcement-bar .cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 8px 16px;
  white-space: nowrap;
}

.relative {
  position: relative;
}

.sticky-top {
  position: sticky;
  top: 0;
}

.sticky-bottom {
  position: fixed;
  bottom: 0;
}

.futureblink-announcement-bar .announcement-inner {
  display: flex;
  gap: 26px;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}

.futureblink-announcement-bar .announcement-inner_running {
  display: block;
  overflow: hidden;
  position: relative;
}

.futureblink-announcement-bar .announcement-inner_running .title {
  white-space: nowrap;
}

.futureblink-announcement-bar .announcement-inner_multiple {
  display: block;
  overflow: hidden;
  position: relative;
}

.futureblink-announcement-bar .announcement-inner_running .swiper-wrapper {
  transition-timing-function: linear;
}

.futureblink-announcement-bar .announcement-inner_running .swiper-initialized .swiper-wrapper .swiper-slide {
  width: fit-content !important;
}

.futureblink-announcement-bar .announcement-inner_multiple .navigation-button {
  background: none;
  position: absolute;
  top: 50%;
  border: none;
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 1;
  display: flex; 
  align-items: center;
  height: fit-content;
}


.futureblink-announcement-bar .announcement-inner_multiple .swiper-initialized {
  padding: 0 20px;
}

.futureblink-announcement-bar .announcement-inner_multiple .swiper-initialized .swiper-wrapper .swiper-slide{
  width: 100% !important; 
  flex: 0 0 100%; 
  max-width: 100%;
}

.futureblink-announcement-bar .swiper-initialized .swiper-wrapper {
  align-items: center;
}

.futureblink-announcement-bar .announcement-inner_multiple #button-prev {
  left: 0;
  right: auto;
}

.futureblink-announcement-bar .announcement-inner_multiple #button-next {
  left: auto;
  right: 0;
}

.futureblink-default-announcement {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background-color: #ffb800;
  padding: 10px;
  z-index: 10;
  flex-wrap: wrap;
  text-align: center;
}

.futureblink-default-announcement p {
  margin: 0;
}



@media (max-width:430px) {
  .futureblink-announcement-bar .announcement-inner_multiple .navigation-button {
    display: none;
  }

  .futureblink-announcement-bar .announcement-inner_multiple .swiper-initialized {
    padding: 0;
  }
}

/* Only show on desktop */
.d-none {
  display: none !important;
}

.d-block {
  display: flex !important;
}

.top-push {
  position: relative;
  /* or specific styles for top-push */
}

.top-push-scroll {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  /* Ensure the bar stays above other content */
}

.top-overlap {
  position: absolute;
  top: 0;
  width: 100%;
}

.top-overlap-scroll {
  position: fixed;
  top: 0;
  width: 100%;
}

.bottom-overlap-scroll {
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Add these styles to your existing CSS */
.futureblink-announcement-bar.cart-placement {
  width: 100%;
  margin: 15px 0;
  border-radius: 8px;
}

/* Hide navigation for smaller screens */

@media (max-width:500px){
  .futureblink-announcement-bar {
    width: 100%;
  }
  .futureblink-announcement-bar .announcement-inner_multiple .navigation-button {
    display: none;
  }
  .futureblink-announcement-bar .close-btn {
    display: none;
  }
  .futureblink-announcement-bar .announcement-container{
     /* multiple container , adjusts with cta button */
    align-items: normal; 
   
  }
  
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .futureblink-announcement-bar.cart-placement {
    margin: 10px 0;
  }
}


.cart-placement {
  position: static !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Fix 5: Add CSS override */
.futureblink-announcement-bar[data-position="cart"] {
  z-index: 10000 !important;
  position: relative !important;
}

@media (max-width: 768px) {
  .futureblink-announcement-bar .announcement-container {
    flex-direction: column;
    align-items: stretch;
  }

  .futureblink-announcement-bar .announcement-inner_multiple {
    flex-direction: column;
  }

  .futureblink-announcement-bar .navigation-button {
    display: none;
    /* Hide navigation buttons if needed */
  }

  .futureblink-announcement-bar p.title {
    font-size: 16px;
  }

  .futureblink-announcement-bar .cta-button {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* ------------------- Button style animations ------------------*/
[data-animation="futureblink-emitting"] {
  animation: emit 1000ms ease-in 3000ms infinite alternate;
}
@keyframes emit {
  to {
      box-shadow: 0 0 1px 4px var(--cta-button-color);
  }
}

[data-animation="futureblink-bounce"]{
animation: bounce 2000ms ease-in infinite;
transform: translateY(0);
}
@keyframes bounce {
  0%, 10%, 20%, 30%, 50%, 70%,90%, 100%{
    transform: translateY(0);
  } 40% {
    transform: translateY(-10px);
  }60% {
    transform: translateY(-8px);
  }80%{
    transform: translateY(-3px);
  }
}

[data-animation="futureblink-flash"]{
  animation: flash 3s ease-in infinite;
}
@keyframes flash{
  10%,30%{
    opacity:20%;
  }
  0%,50%,20%,40%,60%,70%,80%,90%,100%{
    opacity: 100%;
  }
}

[data-animation="futureblink-rubber_band"]{
  animation: rubber-band 2s ease-in  infinite;
}
@keyframes rubber-band {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  50% {
    transform: scaleX(1.15) scaleY(0.85);
  }
  65% {
    transform: scaleX(0.9) scaleY(1);
  }
  75% {
    transform: scaleX(1) scaleY(0.9);
  }
}

[data-animation="futureblink-swing"]{
   animation: swing 2s linear infinite;
   transform-origin: top center;
}
@keyframes swing {
  0%, 10%, 20%, 80%,90%,100% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(0);
  }
  50% {
     transform: rotate(-20deg);
   }
  60% {
  transform: rotate(10deg);
  }
  70% {
     transform: rotate(-10deg);
  }
}

[data-animation="futureblink-tada"]{
 animation: tada 2s linear infinite;
}
@keyframes tada{
  0%, 10%, 20%, 80%,90%,100% {
  transform: rotate(0) scale(0.9);
}
30% {
  transform: rotate(20deg) scale(1.1);
}
40% {
  transform: rotate(10deg) scale(1.05);
}
50% {
   transform: rotate(0deg);
 }
60% {
transform: rotate(-5deg);
}
70% {
   transform: rotate(0) scale(1);
}
}


[data-animation="futureblink-wobble"]{
  animation: wobble 2s linear infinite;
}
@keyframes wobble{
 0%,10%,20%,70%,80%,90%{
   transform: translateX(0) rotate(0);
 }
 30%{
   transform: translateX(-15px) rotate(-10deg);
 }
 40%{
   transform: translateX(15px) rotate(10deg);
 }
 50%{
   transform: translateX(-7px) rotate(-5deg);
 }
 60%{
   transform: translateX(7px) rotate(5deg);
 }
}

[data-animation="futureblink-jello"]{
  animation: jello 2s linear infinite;
}

@keyframes jello{
  0%, 10%, 20%, 80%,90%,100% {
   transform: rotate(0) skewX(0);
 }
 30% {
   transform: rotate(20deg) skewX(30deg);
 }
 40% {
   transform: rotate(0) skewX(0);
 }
 50% {
    transform: rotate(-15deg) skewX(-20deg);
  }
 60% {
 transform: rotate(8deg) skewX(15deg);
 }
 70% {
    transform: rotate(-5deg) skewX(-10deg);
 }
}

[data-animation="futureblink-flip"]{
  animation: flip 3s ease-in-out infinite;
   transform-style: preserve-3d;
}
@keyframes flip {
 0%,10%,20%,30%,40%,50%,60%,70%{
   transform: rotateY(0) scale(1);
 }
 100% {
   transform: rotateY(-360deg) scale(1.08);
 }
}