#elementor-popup-modal-22207 {
    pointer-events: none;
}

/* Base wrapper */
#site-notice.styled-notice {
	opacity:.98;
  position: fixed!important;
  left: 0!important;
  right: 0!important;
  bottom: 0!important;
  z-index: 9999!important;
  background: var(--background-color, #ff4120); /* your WC variable */
  color: var(--theme-text-color, #ffffff);
  border-top:1px solid #FFFFFF30;
  box-shadow: 0 0 8px 2px rgba(0,0,0,0.25),0 4px 4px 1px rgba(155,155,155,0.1) inset!important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;

  border-radius: 0;
}
a:focus-visible, button:focus-visible {
    outline:none!important;
}

/* Push dismiss to right on desktop */
#site-notice .site-notice__dismiss {
  margin-left: auto;
  margin-right:40px;
  background-color: transparent;
}
#site-notice .site-notice__dismiss:hover {
    cursor:pointer;
}

/* Ticker wrapper */
#site-notice .site-notice__message {
  position: relative;
  overflow: hidden;
  flex: 1;
  line-height: 1.4;
  font-size: 1.15rem;
  margin-left:1rem;
  white-space: nowrap;
}

/* Scrolling inner text */
#site-notice .site-notice__message-inner {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  /* adjust speed by changing duration (smaller = faster) */
  animation: siteNoticeTicker 35s linear infinite;
}

/* Pause the ticker when hovering the whole bar or just the text */
#site-notice:hover .site-notice__message-inner,
#site-notice .site-notice__message-inner:hover {
  animation-play-state: paused;
}

/* Keyframes for leftward scroll */
@keyframes siteNoticeTicker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Dismiss link — match WooCommerce style */
#site-notice .site-notice__dismiss {
  margin-left: 1rem;
  padding: 0.45rem 0.9rem;

  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;

  color: var(--theme-text-color, #ffffff);
  font-size: 0.95rem;
  text-transform: uppercase;
  text-decoration: none;

  transition: all 0.25s ease;
}
.styled-notice .site-notice__dismiss {
    display:flex!important;
    justify-content: center;
    align-items: center;
}

#site-notice .site-notice__dismiss:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.15);
}

/* Optional: bell icon like WooCommerce */
#site-notice.styled-notice::before {
  
  margin-right: 12px;
  font-size: 1.3rem;
}
.site-notice {
  --theme-text-color: #ffffff;
  --background-color: #ff4120;
}
.site-notice__dismiss::before,
.site-notice__dismiss::after {
    content: none !important;
    background: none !important;
}
@media(max-width:1024px) {
    #site-notice .site-notice__dismiss {
      margin-left: auto;
      margin-right:8px;
      
    }
}
/* Stack content on small screens */
@media (max-width: 767px) {
  /* Wrapper still full-width bar, but column layout */
  #site-notice.styled-notice {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 10px 20px 15px 0 !important;
  }

  /* X laid over top-right of the bar */
  #site-notice .site-notice__dismiss {
    position: relative;
    order:99;
    top: 4px;
    right: 0px;
    margin: 0 !important;
    padding: 3px 10px !important;
    z-index: 9999; /* ensures it floats over the message */
  }

  /* You no longer need order on this when it's absolute */
  .styled-notice .site-notice__dismiss {
    /* keep centering for desktop, but don't touch order here */
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  /* Message block sits underneath, with space reserved for the X */
  #site-notice .site-notice__message {
    order: 2;
    margin-top: 10px;
    padding-right: 0px;   /* room so text doesn't hide behind X */
    font-size: 1.05rem !important;
    width: 100%;
    white-space: nowrap;
  }

  /* Ticker: keep normal behavior, just slower/faster as you want */
  #site-notice .site-notice__message-inner {
    display: inline-block;
    padding-left: 100%;        /* start off to the right */
    animation: siteNoticeTicker 25s linear infinite;
  }
}




/* Make the entire notice bar allow pointer events */
#site-notice {
  pointer-events: auto;
  position: fixed; /* already there, but reassert just in case */
  z-index: 9999;
}


/* Re-enable and prioritize the dismiss button */
#site-notice .site-notice__dismiss {
  pointer-events: auto;
  position: relative;
  z-index: 10000;

  /* Make the hit target nice and big */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

#site-notice.closed {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}


/* DIFFERENT BACKGROUND COLORS DEPENDING ON NOTICE */
#site-notice[data-notice-id="labor-day-2025"],
#site-notice[data-notice-id="black-friday-2025"],
#site-notice[data-notice-id="cyber-monday-2025"],
#site-notice[data-notice-id="default-free-shipping"] {
  background: #ff4120;
}