#main-consent-banner,
#main-banner,
#consent-banner,
#initial-consent-banner {
    display: none !important; /* Hide all banners by default */
    opacity: 0 !important;
    visibility: hidden !important;
}
#main-consent-banner.show-banner,
#main-banner.show-banner,
#consent-banner.show-banner,
#initial-consent-banner.show-banner {
    display: flex !important; /* Show banners when needed */
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes slideUpBottom   { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDownBottom { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideLeftBottom { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideRightBottom{ from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===========================
   Preference Animations (Center Origin)
   =========================== */
@keyframes slideUpCenter   { from { top:50%; left:50%; transform: translate(-50%, 100%);  opacity:0; } to { top:50%; left:50%; transform: translate(-50%, -50%); opacity:1; } }
@keyframes slideDownCenter { from { top:50%; left:50%; transform: translate(-50%, -200%); opacity:0; } to { top:50%; left:50%; transform: translate(-50%, -50%); opacity:1; } }
@keyframes slideLeftCenter { from { top:50%; left:50%; transform: translate(100%, -50%);  opacity:0; } to { top:50%; left:50%; transform: translate(-50%, -50%); opacity:1; } }
@keyframes slideRightCenter{ from { top:50%; left:50%; transform: translate(-200%,-50%);  opacity:0; } to { top:50%; left:50%; transform: translate(-50%, -50%); opacity:1; } }


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(10px)  scale(0.8); }
  20%  { opacity: 1; transform: translateY(0)     scale(1); }
  80%  { opacity: 1; transform: translateY(0)     scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.8); }
}

@keyframes fadeCenterIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}
.consentbit-banner-div[data-animation="slide-up"],
.consentbit-ccpa-banner-div[data-animation="slide-up"],
.consentbit-ccpa_banner_div[data-animation="slide-up"],
.consentbit-gdpr-banner-div[data-animation="slide-up"],
.consentbit-gdpr_banner_div[data-animation="slide-up"] {
  animation: slideUpBottom 0.6s ease-out forwards;
}

.consentbit-banner-div[data-animation="slide-down"],
.consentbit-ccpa-banner-div[data-animation="slide-down"],
.consentbit-ccpa_banner_div[data-animation="slide-down"],
.consentbit-gdpr-banner-div[data-animation="slide-down"],
.consentbit-gdpr_banner_div[data-animation="slide-down"] {
  animation: slideDownBottom 0.6s ease-out forwards;
}

.consentbit-banner-div[data-animation="slide-left"],
.consentbit-ccpa-banner-div[data-animation="slide-left"],
.consentbit-ccpa_banner_div[data-animation="slide-left"],
.consentbit-gdpr-banner-div[data-animation="slide-left"],
.consentbit-gdpr_banner_div[data-animation="slide-left"] {
  animation: slideLeftBottom 0.6s ease-out forwards;
}

.consentbit-banner-div[data-animation="slide-right"],
.consentbit-ccpa-banner-div[data-animation="slide-right"],
.consentbit-ccpa_banner_div[data-animation="slide-right"],
.consentbit-gdpr-banner-div[data-animation="slide-right"],
.consentbit-gdpr_banner_div[data-animation="slide-right"] {
  animation: slideRightBottom 0.6s ease-out forwards;
}

/* BANNER FADE (enter) — matches .cookie-banner.fade example */
.consentbit-banner-div[data-animation="fade"],
.consentbit-ccpa-banner-div[data-animation="fade"],
.consentbit-ccpa_banner_div[data-animation="fade"],
.consentbit-gdpr-banner-div[data-animation="fade"],
.consentbit-gdpr_banner_div[data-animation="fade"] {
  opacity: 0;                       /* start transparent */
  will-change: opacity, transform;  /* hint for smoother anim */
  animation: fadeIn 0.5s ease-out forwards;
}

/* OPTIONAL: BANNER FADE-IN-OUT (toast-like) */
.consentbit-banner-div[data-animation="fade-in-out"],
.consentbit-ccpa-banner-div[data-animation="fade-in-out"],
.consentbit-ccpa_banner_div[data-animation="fade-in-out"],
.consentbit-gdpr-banner-div[data-animation="fade-in-out"],
.consentbit-gdpr_banner_div[data-animation="fade-in-out"] {
  opacity: 0;
  will-change: opacity, transform;
  animation: fadeInOut 1.2s ease-in-out forwards;
}

/* ===========================
   Preference assignments
   =========================== */
.consentbit-preference-div[data-animation="slide-up"],
.consentbit-preference_div[data-animation="slide-up"],
.consentbit-ccpa-preference-div[data-animation="slide-up"],
.consentbit-ccpa_preference[data-animation="slide-up"] {
  animation: slideUpCenter 0.6s ease-out forwards;
}

.consentbit-preference-div[data-animation="slide-down"],
.consentbit-preference_div[data-animation="slide-down"],
.consentbit-ccpa-preference-div[data-animation="slide-down"],
.consentbit-ccpa_preference[data-animation="slide-down"] {
  animation: slideDownCenter 0.6s ease-out forwards;
}

.consentbit-preference-div[data-animation="slide-left"],
.consentbit-preference_div[data-animation="slide-left"],
.consentbit-ccpa-preference-div[data-animation="slide-left"],
.consentbit-ccpa_preference[data-animation="slide-left"] {
  animation: slideLeftCenter 0.6s ease-out forwards;
}

.consentbit-preference-div[data-animation="slide-right"],
.consentbit-preference_div[data-animation="slide-right"],
.consentbit-ccpa-preference-div[data-animation="slide-right"],
.consentbit-ccpa_preference[data-animation="slide-right"] {
  animation: slideRightCenter 0.6s ease-out forwards;
}

/* Smooth fade-in for centered preference modal */
.consentbit-preference-div[data-animation="fade"],
.consentbit-preference_div[data-animation="fade"],
.consentbit-ccpa-preference-div[data-animation="fade"],
.consentbit-ccpa_preference[data-animation="fade"] {
  opacity: 0;
  will-change: opacity, transform;
  animation: fadeCenterIn 0.5s ease-out forwards;
}