/* SACDI Donation Console — colours/typography come from Elementor globals via widget controls (CSS variables). */
.sdon {
	--sdon-accent: var(--e-global-color-primary);
	--sdon-on-accent: var(--e-global-color-beda222);
	--sdon-text: var(--e-global-color-text);
	--sdon-surface: var(--e-global-color-beda222);
	--sdon-border: var(--e-global-color-text);
	--sdon-badge: var(--e-global-color-secondary);
	--sdon-hairline: rgba(0, 0, 0, .08);
	color: var(--sdon-text);
}
.sdon, .sdon *, .sdon *::before, .sdon *::after { box-sizing: border-box; }
.sdon-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.sdon-overline { text-transform: uppercase; letter-spacing: .1em; }
.sdon-group { display: flex; flex-direction: column; gap: 8px; }
.sdon-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/*
 * Option buttons (frequency, currency, amounts).
 * The site kit styles every <button> on :hover and :focus (white text, transparent background,
 * yellow border, 100px radius), so these rules are scoped tightly enough (".sdon .sdon-form button.x")
 * to win over ".elementor-kit-6 button:hover". Rule: hover = that option's selected look + 100px radius.
 */
/* No "font" here: typography comes from the widget's Global Font controls ({{WRAPPER}} .sdon-freq etc.) */
.sdon .sdon-form button { cursor: pointer; margin: 0; border: 0; border-radius: 4px; outline: 0; transition: background-color .2s, color .2s, border-radius .2s, box-shadow .2s; }
.sdon .sdon-form button:focus-visible { outline: 2px solid var(--sdon-text); outline-offset: 2px; }
.sdon .sdon-submit:focus-visible { outline: 2px solid var(--sdon-text); outline-offset: 2px; }

/* Frequency toggle */
.sdon-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 4px; box-shadow: 0 0 0 1px var(--sdon-hairline); }
.sdon .sdon-form button.sdon-freq,
.sdon .sdon-form button.sdon-freq:focus { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; padding: 10px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--sdon-text); }
.sdon .sdon-form button.sdon-freq[aria-pressed="true"],
.sdon .sdon-form button.sdon-freq:hover { background: var(--sdon-accent); color: var(--sdon-on-accent); border: 0; }
.sdon .sdon-form button.sdon-freq:hover { border-radius: 100px; }
.sdon-badge { background: var(--sdon-badge); color: var(--sdon-text); border-radius: 12px; padding: 2px 6px; font-size: .75em; line-height: 1.4; }
@media (max-width: 767px) { .sdon-badge { display: none; } }

/* Currency */
.sdon-currency { display: inline-flex; gap: 4px; padding: 2px; border-radius: 4px; box-shadow: 0 0 0 1px var(--sdon-hairline); }
.sdon .sdon-form button.sdon-cur,
.sdon .sdon-form button.sdon-cur:focus { padding: 4px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--sdon-text); box-shadow: none; }
.sdon .sdon-form button.sdon-cur[aria-pressed="true"],
.sdon .sdon-form button.sdon-cur:not([aria-disabled="true"]):hover { background: var(--sdon-surface); color: var(--sdon-accent); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.sdon .sdon-form button.sdon-cur:not([aria-disabled="true"]):hover { border-radius: 100px; }
.sdon .sdon-form button.sdon-cur[aria-disabled="true"],
.sdon .sdon-form button.sdon-cur[aria-disabled="true"]:hover { opacity: .45; cursor: not-allowed; background: transparent; color: var(--sdon-text); border: 0; border-radius: 4px; box-shadow: none; }

/* Amounts */
.sdon-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 767px) { .sdon-amounts { grid-template-columns: repeat(2, 1fr); } }
.sdon .sdon-form button.sdon-amount,
.sdon .sdon-form button.sdon-amount:focus { padding: 12px 8px; border: 0; border-radius: 4px; background: var(--sdon-surface); color: var(--sdon-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); white-space: nowrap; }
.sdon .sdon-form button.sdon-amount[aria-pressed="true"],
.sdon .sdon-form button.sdon-amount:hover { background: var(--sdon-accent); color: var(--sdon-on-accent); border: 0; }
.sdon .sdon-form button.sdon-amount:hover { border-radius: 100px; }

/* Custom amount — no coloured border while typing */
.sdon-custom { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; border: 1px solid var(--sdon-border); border-radius: 4px; background: var(--sdon-surface); cursor: text; }
.sdon-custom.is-active, .sdon-custom:focus-within { border-color: var(--sdon-border); box-shadow: none; }
.sdon .sdon-custom input:focus, .sdon .sdon-custom input:focus-visible { outline: 0 !important; border-color: transparent !important; box-shadow: none !important; }
.sdon-custom input { flex: 1; min-width: 0; border: 0 !important; padding: 0 !important; background: transparent !important; color: var(--sdon-text); box-shadow: none !important; outline: 0; font-size: 1.125rem; }
.sdon-custom input::placeholder { color: var(--sdon-text); opacity: .75; }
.sdon-custom input::-webkit-outer-spin-button, .sdon-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sdon-custom input[type=number] { -moz-appearance: textfield; }

/* Impact */
.sdon-impact { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 4px; box-shadow: 0 0 0 1px var(--sdon-hairline); }
.sdon-impact-icon { color: var(--sdon-accent); flex-shrink: 0; line-height: 1; padding-top: 2px; }
.sdon-impact-icon svg { width: 18px; height: 18px; fill: currentColor; }
.sdon-impact p { margin: 0; }

/* Select & inputs */
.sdon-select select, .sdon-field input { width: 100%; border: 1px solid var(--sdon-border); border-radius: 4px; background-color: var(--sdon-surface); color: var(--sdon-text); }
.sdon-select select { padding: 12px 40px 12px 12px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.sdon-donor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 767px) { .sdon-donor { grid-template-columns: 1fr; } }
.sdon-field { display: flex; flex-direction: column; gap: 4px; }
.sdon-field input { padding: 10px 12px; }
.sdon-field abbr { text-decoration: none; border: 0; color: var(--sdon-accent); }
/* Focus keeps the black border (no green); a slightly heavier black edge shows which field is active */
.sdon .sdon-select select:focus, .sdon .sdon-select select:focus-visible,
.sdon .sdon-field input:focus, .sdon .sdon-field input:focus-visible { outline: 0; border-color: var(--sdon-border); box-shadow: 0 0 0 1px var(--sdon-border); }
.sdon .sdon-field input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.sdon-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Checkboxes */
.sdon-checks { display: flex; flex-direction: column; gap: 8px; }
.sdon-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.sdon-check input { width: 16px; height: 16px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--sdon-accent); cursor: pointer; }

.sdon-fee-note { margin: -4px 0 0; opacity: .85; }
.sdon-fee-note:empty { display: none; }
.sdon-msg { margin: 0; padding: 10px 12px; border-radius: 4px; background: rgba(179, 38, 30, .08); color: #8c1d18; }
.sdon-msg.is-info { background: rgba(0, 0, 0, .04); color: var(--sdon-text); }

/* Submit (inherits the site's .button-primary pill) */
.sdon-submit-wrap { align-self: center; margin-top: 8px; }
.sdon .sdon-submit.is-busy { opacity: .7; pointer-events: none; }

.sdon-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; text-align: center; }
.sdon-security svg { width: 14px; height: 14px; fill: var(--sdon-accent); }
.sdon-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.sdon-chip { padding: 2px 8px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .10); font-weight: 600; }

/* Success */
.sdon-success { text-align: center; padding: 24px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; outline: 0; }
.sdon-success[hidden] { display: none; }
.sdon-success-icon { color: var(--sdon-accent); }
.sdon-success-icon svg { width: 56px; height: 56px; fill: currentColor; }
.sdon-success-title { margin: 8px 0 0; color: var(--sdon-text); }
.sdon-success p { margin: 0; max-width: 440px; }
.sdon-success-ref { opacity: .7; }
.sdon .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }