/* --------------------------
   GLOBAL RESET + THEME
--------------------------- */

:root {
  --gold: #d0a933;
  --navy: #0B121F;
  --text-white: #e8e6e3;
  --text-gray: #333;
  --body-font: 'Segoe UI', sans-serif;
}

body, html {
  background-color: var(--navy) !important;
  font-family: var(--body-font) !important;
  color: var(--text-white) !important;
}

/* --------------------------
   HEADINGS + EVENT TITLE
--------------------------- */

h1, h2, h3,
.EventTitle, .Heading,
.eventTitle, .ap_eventName,
.GroupTitle, div[id*="GroupTitle"],
.ap_registration h1,
.ap_registration h2,
.ap_registration h3 {
  color: var(--gold) !important;
  font-weight: bold !important;
}

/* --------------------------
   CALENDAR BOX (WHITE PANEL)
--------------------------- */

.eventInfoBlock,
fieldset,
.EventSummaryPanel,
.EventDetailsContainer,
.RegistrationEventDetails,
.EventTitleBlock,
div[style*="background-color: white"],
div[style*="background:#fff"],
div[style*="background: #ffffff"],
div[style*="background:#ffffff"] {
  background-color: #f9f9f9 !important;
  border-radius: 6px;
  padding: 15px;
  color: var(--text-gray) !important;
  font-weight: 500 !important;
}

.eventInfoBlock *,
fieldset *,
.EventSummaryPanel *,
.EventDetailsContainer *,
.RegistrationEventDetails *,
.EventTitleBlock * {
  color: var(--text-gray) !important;
}

/* --------------------------
   ORANGE ARROW → GOLD CIRCLE
--------------------------- */

.GroupTitle a,
.ap_registration .GroupTitle a,
.ap_registration div[id*="GroupTitle"] a {
  background-color: transparent !important;
  color: var(--gold) !important;
  border: 2px solid var(--gold) !important;
  padding: 4px 10px !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  font-weight: bold;
}

.GroupTitle a::after {
  content: "→";
  color: var(--gold) !important;
  font-weight: bold;
}

/* --------------------------
   FORM LABELS + INPUTS
--------------------------- */

label, .FormFieldCaption, .FieldLabel {
  color: var(--gold) !important;
  font-weight: 500 !important;
  font-size: 15px;
}

input[type="text"],
input[type="email"],
select, textarea {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: var(--body-font) !important;
  padding: 8px 12px !important;
  border: none !important;
  border-radius: 6px !important;
}

select {
  appearance: none;
}

/* --------------------------
   STEP 1: EMAIL LABEL
--------------------------- */

.ap_registration label[for$="Email"] {
  color: var(--gold) !important;
  font-weight: bold !important;
}

/* --------------------------
   STEP 2: TICKET SELECTION
--------------------------- */

.ap_registration h4,
.ap_eventRegistration h4,
div[id*="RegistrationTypes"] h4,
.eventInfoBlock h4 {
  color: var(--gold) !important;
}

/* Ticket options in white */
.ap_registration .RegistrationType label,
.ap_registration .RegistrationType span,
.ap_registration .RegistrationType div {
  color: var(--text-white) !important;
}

.ap_registration .RegistrationType strong {
  color: var(--gold) !important;
}

/* Step 2 "Registration" label (next to radio bullets) */
.ap_registration td:first-child > label {
  color: var(--gold) !important;
}

/* --------------------------
   STEP 3: QUESTIONS SECTION
--------------------------- */

/* Questions (keep gold) */
.ap_registration .FormFieldCaption,
.ap_registration .FieldLabel,
.ap_registration .form label:not([for]) {
  color: var(--gold) !important;
  font-weight: bold !important;
}

/* Answer choices (make white) */
.ap_registration .form label input[type="radio"] + span,
.ap_registration .form label input[type="checkbox"] + span {
  color: var(--text-white) !important;
  font-weight: normal !important;
}

/* Optional: ensure custom question text defaults to white if missed */
.ap_registration .form div,
.ap_registration .form p {
  color: var(--text-white) !important;
}

/* --------------------------
   BUTTONS
--------------------------- */

input[type="submit"], button, .Button, .Submit, a.Cancel {
  background-color: #203D64 !important;
  color: white !important;
  padding: 10px 24px !important;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  transition: background-color 0.3s ease;
  margin-top: 20px;
}

input[type="submit"]:hover,
button:hover,
a.Cancel:hover {
  background-color: #1a2f4f !important;
}

/* --------------------------
   BACK LINK + MANDATORY
--------------------------- */

a.BackLink,
.RequiredLabel {
  color: var(--gold) !important;
  font-size: 14px !important;
  font-weight: 500;
}

/* --------------------------
   PAYMENT ICONS
--------------------------- */

.EventPaymentMethods img {
  filter: grayscale(100%) brightness(90%);
  max-height: 30px;
  margin-right: 8px;
}

/* --------------------------
   REMOVE HR
--------------------------- */

hr {
  display: none !important;
}
/* 🔶 Questions: Yellow */
.ap_registration .FormField,
.ap_registration .FormField span:first-child,
.ap_registration .FormField p:first-of-type,
.ap_registration .FormField > label,
.ap_registration .FormFieldCaption,
.ap_registration .FieldLabel {
  color: #d0a933 !important;
  font-weight: bold !important;
}

/* 🔷 Answers: White (checkboxes, radios, etc.) */
.ap_registration .FormField input[type="radio"] + span,
.ap_registration .FormField input[type="checkbox"] + span,
.ap_registration .OptionLabel span,
.ap_registration label span:not(.FieldLabel):not(.FormFieldCaption) {
  color: #e8e6e3 !important;
  font-weight: normal !important;
}
<style>
/* Title */
.waGadgetDonationGoal h4.gadgetTitleH4 {
  color: #d0a933 !important;
}

/* Labels "Collected:" and "Goal:" */
.waGadgetDonationGoal th.donationGoalCollectedTitleContainer,
.waGadgetDonationGoal th.donationGoalAmountTitleContainer {
  color: #d0a933 !important;
}

/* Values ($180.00, $15,000.00) */
.waGadgetDonationGoal td.donationGoalCollectedValueContainer,
.waGadgetDonationGoal td.donationGoalAmountValueContainer {
  color: #ffffff !important;
}

/* Percentage text (right side) */
.waGadgetDonationGoal .progressBarRight {
  color: #d0a933 !important;
}

/* Empty track */
.waGadgetDonationGoal .progressBar {
  background-color: #0e1a24 !important;
  border-color: #0e1a24 !important;
}

/* Filled bar — override WA’s theme color */
.waGadgetDonationGoal.donationGoalStyle002 
.progressBar .progressBarLeft table td.donationGoalProgressBarLeftPart span {
  background-color: #d0a933 !important;
}
</style>

#donation-container {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px; /* for a softer edge */
}