/* Quick Promo Banner Frontend */
#qpb-banner.qpb-banner{
  position: fixed;
  left: 50%;
  right: auto;
  z-index: 999999;
  width: var(--qpb-width, 100%);
  max-width: 100%;
  min-height: var(--qpb-height, 48px);
  background: var(--qpb-bg, #000000);
  border: var(--qpb-border-width, 0px) solid var(--qpb-border-color, #000000);
  border-radius: var(--qpb-radius, 12px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px;

  opacity: 0;
  animation-duration: var(--qpb-anim-speed, 500ms);
  animation-delay: var(--qpb-anim-delay, 300ms);
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

#qpb-banner.qpb-top{
  top: var(--qpb-adminbar-offset, 0px);
  transform: translate(-50%, -8px);
  animation-name: qpbSlideDown;
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--qpb-radius, 12px);
  border-bottom-right-radius: var(--qpb-radius, 12px);
}

#qpb-banner.qpb-bottom{
  bottom: 0;
  transform: translate(-50%, 8px);
  animation-name: qpbSlideUp;
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--qpb-radius, 12px);
  border-top-right-radius: var(--qpb-radius, 12px);
}

#qpb-banner .qpb-inner{
  width: 100%;
  line-height: 1.2;
}

@keyframes qpbSlideDown{
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes qpbSlideUp{
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce){
  #qpb-banner.qpb-banner{
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
  }
}