.headlinedop {
  padding: 0px !important;
  margin-top: 0px !important;
  font-size: 1.4rem;
  text-transform: uppercase;
  font-weight: 700 !important;
  
}

.wp-block-button__link.wp-element-button {
  background-color: #00a99c !important;
  border-radius: 0px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

@keyframes jiggle {
  0%   { transform: translateX(-2px) rotate(-1deg); }
  50%  { transform: translateX( 2px) rotate( 1deg); }
  100% { transform: translateX(-2px) rotate(-1deg); }
}

.dpo-widget.jiggle {
  /* run back-and-forth every 0.1s (so ~20 cycles over 2s) */
  animation: jiggle 0.1s ease-in-out infinite alternate;
}
#dpo-mobile-donate {
  width: 100%;
  font-size: 1.4rem;
}
#dpo-continue {
  top: -22px !important;
}
.headlinedop {
  position: relative;
  top: 8px;
}
#dpo-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0);
    overflow-y: auto;
    padding: 50px 0;
    z-index: 9998;
    overflow-y: auto;
    display: none;
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 40px;
}
.dpo-content h2, .dpo-text {
  color: #000000 !important;
}

#dpo-bubble {
    margin-top: 150px;
	position: absolute;
    top: 30% !important; 
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 750px;
    width: calc(100% - 40px);
    padding: 50px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);    z-index: 9999;
}
.dpo-content { display: flex; flex-direction: column; }
.dpo-content h2 { text-align: center; margin-bottom: 20px; }
.dpo-text { text-align: left; margin-bottom: 20px; min-width: 250px; }
/* === Override Donorbox Embed to eliminate scrollbars === */
.dpo-widget-wrapper {
  /* let the outer overlay handle scrolling */
  overflow: visible !important;
}

.dpo-widget {
  width: 400px !important;       /* fill the bubble width */
  max-width: 100% !important;
  height: 900px !important;      /* let the iframe grow to content */
  min-height: 800px !important; /* or whatever minimum you prefer */
  border: none !important;
  overflow: hidden !important;  /* hide any internal scrollbars */
}

.dpo-button-wrapper { text-align: center; }
    padding: 20px 20px; border: none;
    background: #00a99c; color: #fff;
    font-size: 16px; cursor: pointer; border-radius: 0px;
}

/* Ensure embed content doesn't scroll */
.dpo-embed, .dpo-embed iframe, .dpo-embed embed {
    overflow: visible !important;
}

/* Ensure no scrollbars on embed widget */
.dpo-widget-wrapper {
    overflow: visible !important;
}


/* Desktop: side-by-side layout */
.dpo-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.dpo-main {
  flex: 1;
  padding-right: 20px;
}
.dpo-widget-wrapper {
  flex: none;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

/* Mobile: stacked and show donate button */
@media (max-width: 768px) {
  .dpo-content {
    flex-direction: column;
  }
  .dpo-widget-wrapper {
    display: none !important;
  }
  .dpo-mobile-donate {
    display: block;
    margin: 20px auto;
    padding: 20px 20px;
    font-size: 16px;
    background: #ed125f;
    color: white;
    border: none;
    border-radius: 0px;
    cursor: pointer;
  }
}
/* Hide mobile donate button by default on desktop */
.dpo-mobile-donate {
  display: none;
}


@media (max-width: 768px) {

#dpo-bubble {
    top: 25% !important;
	}
  /* Turn button-wrapper into a row on small screens */
  .dpo-button-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px; /* spacing between buttons */
  }
  /* Make sure the donate button is visible inline */
  .dpo-mobile-donate {
    display: inline-block;
    margin: 0;
  }
	#dpo-bubble {
    margin-top: 150px;
	position: absolute;
	top: 20%; left: 50%;align-content
	}
}
/* INITIAL STATE: overlay & bubble hidden/off-screen */
#dpo-overlay {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
#dpo-bubble {
  opacity: 0;
  /* start below the viewport (100% down + extra 20px) */
  transform: translate(-50%, calc(100% + 20px));
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* VISIBLE STATE: bubble slid up into center */
#dpo-overlay.show {
  opacity: 1;
  background: rgba(0,0,0,0.5);
}
.headlinedop {
  line-height: 0.7;
}
#dpo-bubble.show {
  opacity: 1;
  /* back to perfect centering */
  transform: translate(-50%, -50%);
}


/* Loader bar: 3px tall, 1% steps over 6s */
#dpo-bubble .dpo-loader {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background-color: #cfdc29;
    z-index: 10000;
}


/* Override to center popup with 140px top padding and slide-up animation */
#dpo-bubble {
    position: absolute !important;
    top: 50%;
    left: 50% !important;
    transform: translate(-50%, calc(100% + 20px)) !important;
    padding: 40px 50px 50px !important;
    max-width: 750px !important;
    width: calc(100% - 40px) !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out !important;
}

#dpo-bubble.show {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}

/* Fade-in for Continue button */
  opacity: 0 !important;
  transition: opacity 5s ease-in !important;
}
  opacity: 1 !important;
}