—
center all of them consistently */
#content .section {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
width: 100% !important;
margin: 0 0 14px 0 !important;
}
/* Captcha specifically: confirmed via Inspect Element. The actual widget
(#captcha25601) is a fixed 304x78px box drawn by Google inside an
iframe, so its internal size can't be changed, but we can center the
box itself, which was the actual issue. */
#content .section.captcha {
align-items: center !important;
justify-content: center !important;
margin: 16px auto !important;
width: 100% !important;
}
#content #captcha25601 {
display: flex !important;
justify-content: center !important;
width: 100% !important;
margin: 0 auto !important;
}
#noCaptchaResponseError {
text-align: center !important;
width: 100%;
display: block !important;
font-size: 0.8rem !important;
font-weight: 400 !important;
color: #ffb4b4 !important; /* soft/muted red so it still reads as an error but doesn't shout against the navy box */
margin: 0 0 6px 0 !important;
order: -1; /* ensures it stays directly above the captcha box even if source order ever changes */
}
/* ---- Payment Information section: confirmed real markup ----
Payment Information
... iframe ...
The payment iframe itself is hosted by Bloomerang's payment processor
(cross-domain), so its internal fonts/colors can't be restyled, but we
can control the heading spacing and the box's position. */
#content .section.onepay {
align-items: center !important;
text-align: center !important;
}
#content .section.onepay h3 {
margin-bottom: 6px !important;
text-align: center !important;
width: 100%;
}
#content .section.onepay .field.payment {
margin-top: 0 !important;
padding-top: 0 !important;
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
#content .section.onepay .payment-container {
margin: 0 auto !important;
}
#content #payments-ui-iframe {
margin: 0 auto !important; /* Bloomerang's own inline style had a 12px left nudge; centering it here instead */
max-width: 100% !important;
width: 100% !important;
}
/* ---- Consent / updates checkboxes: confirmed real markup ----
Main line: span.label = "I would like to receive or continue receiving
updates from Central Coast State Parks Association" (no ending period)
Sub-options: span.label = "by email" / "by postal mail" / "by phone"
(lowercase). Adding the requested period, and capitalizing the sub-option
wording, without altering the underlying words. */
#content label[for="consent-all"] span.label::after {
content: ".";
}
#content .consent-email span.label,
#content .consent-mail span.label,
#content .consent-phone span.label {
text-transform: capitalize;
}
#content .section.consent .field.checkbox {
display: flex !important;
align-items: center !important;
gap: 8px;
margin: 0 0 8px 0 !important;
}
#content .section.consent input[type="checkbox"] {
width: auto !important;
margin: 0 !important;
transform: scale(1.2);
accent-color: var(--brand-primary);
}
/* ---- Org contact info footer ---- */
#orgInfo {
text-align: center !important;
font-family: var(--brand-font) !important;
color: var(--brand-text) !important;
font-size: 1.05rem !important;
margin-top: 24px !important;
}
#orgInfo h2 {
color: var(--brand-primary) !important;
font-size: 1.4rem !important;
}
#orgInfo a {
color: var(--brand-accent) !important;
}
#orgInfo a:hover {
color: var(--brand-primary) !important;
}