.wp-child-theme-graceatwork-divi.give-page {
  .givewp-campaign-goal__container {
    gap: 0.5rem;
  }

  &,
  .givewp-campaign-goal__container-item span,
  .givewp-campaign-goal__container-item strong,
  .givewp-campaign-stats-block strong,
  .givewp-campaign-stats-block span {
    color: var(--text-color);
  }

  .givewp-donation-form-modal__open {
    background-color: var(--primary-color);

    &:hover {
      background-color: var(--primary-color);
      color: var(--white) !important;
      opacity: 0.9;
    }
  }

  .givewp-campaign-donations-block
    .givewp-campaign-donations-block__empty-button
    button.givewp-donation-form-modal__open {
    color: var(--primary-color) !important;
    border-color: var(--primary-color);

    &:hover {
      background-color: var(--primary-color);
      color: var(--white) !important;
    }
  }

  .givewp-campaign-donors-block
    .givewp-campaign-donors-block__empty-button
    button.givewp-donation-form-modal__open {
    color: var(--primary-color) !important;
    border-color: var(--primary-color);

    &:hover {
      background-color: var(--primary-color);
      color: var(--white) !important;
    }
  }

  /* /donate page styles */

  .give-grid {
    .give-form-grid-content__title {
      color: var(--primary-color);
    }
  }

  .root-data-givewp-embed {
    padding: 40px 0;
    position: relative;
    min-height: 200px;

    /* Loading spinner */
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid var(--primary-color, #007cba);
      border-radius: 50%;
      animation: givewp-spinner 1s linear infinite;
      z-index: 1;
    }

    /* Ensure iframe covers the spinner */
    iframe {
      position: relative;
      z-index: 2;
      background: transparent;
    }
  }
}

/* Spinner animation */
@keyframes givewp-spinner {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}