/**
 * Donation form theme — matches the payment-system React app (app-src) dark palette.
 *
 * Tokens (app-src/src/styles/theme.ts, dark mode):
 *   bg        #28527A  (eleven primary blue)
 *   accent    #8AC4D0  (eleven secondary blue) — selected amount, donate button, focus
 *   text      #D9D9D9  (primary) / #959595 (secondary)
 *
 * Targets the real inline-form markup (.charitable-donation-form, template
 * "standard"): amounts are <li.donation-amount> with a nested <label>; the
 * selected item carries .selected.
 *
 * Cascade strategy — most rules are scoped under
 * `.charitable-donation-form.charitable-template-standard` to MATCH the
 * theme's own qualifier (charitable.min.css uses the same two classes). Since
 * this file is enqueued after charitable.min.css, equal-specificity rules then
 * win by source order, so no !important is needed for colours/borders/layout.
 *
 * !important is kept ONLY where it is genuinely required:
 *   - the custom-amount wrapper flex-direction, where the theme selector is
 *     pathologically specific (…span.custom-donation-amount-wrapper);
 *   - the @media mobile block, which fights base.min.css (campaign layout) —
 *     that file loads AFTER this one, so equal specificity would lose.
 */

:root {
	--pswp-bg: #28527A;
	--pswp-bg-elev: #2f5d88;
	--pswp-accent: #8AC4D0;
	--pswp-text: #D9D9D9;
	--pswp-text-muted: #959595;
	--pswp-radius: 8px;
}

/* ---- Form container ----------------------------------------------------- */
.charitable-donation-form {
	background: var(--pswp-bg);
	color: var(--pswp-text);
	border-radius: 16px;
	padding: 1.5em;
}

.charitable-donation-form .charitable-form-header {
	color: var(--pswp-text);
	font-weight: 700;
}

/* The theme borders every fieldset on all four sides, so where two sections
   meet, one's bottom border sits next to the next one's top border — a double
   line. Collapse to a single divider: top border only, none on the first
   fieldset. (Scoped with .charitable-template-standard to out-rank the theme.) */
.charitable-donation-form.charitable-template-standard .charitable-fieldset {
	border: none;
	border-top: 1px solid rgba(138, 196, 208, 0.25);
}

.charitable-donation-form.charitable-template-standard .charitable-fieldset:first-of-type {
	border-top: none;
}

.charitable-donation-form label,
.charitable-donation-form .charitable-form-field label,
.charitable-donation-form .description {
	color: var(--pswp-text);
}

/* Every field on this form is required, so the per-label "*" is noise — hide it.
   (Client + server validation still enforce the requirement.) */
.charitable-donation-form abbr.required {
	display: none;
}

/* ---- Suggested amount tiles --------------------------------------------
   Match the React app's MUI `variant="contained"` amount buttons: filled
   secondary-blue (#8AC4D0), dark ink, MUI elevation, uppercase. Selected =
   muted/desaturated, mirroring the app's pressed state.                    */
.charitable-donation-form ul.donation-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* :not(.custom-donation-amount) so these filled-tile styles never apply to the
   bare custom-amount input row (which we strip to just the white field). */
.charitable-donation-form.charitable-template-standard ul.donation-amounts > li.donation-amount:not(.custom-donation-amount) {
	flex: 1 1 calc(50% - 0.5rem);
	min-width: 0;          /* hold a consistent 2-up grid; default min-content breaks the wrap on narrow screens */
	margin: 0;
	padding: 0;
	background: var(--pswp-accent);
	border: none;
	border-radius: 4px;
	box-shadow:
		0 3px 1px -2px rgba(0, 0, 0, 0.2),
		0 2px 2px 0 rgba(0, 0, 0, 0.14),
		0 1px 5px 0 rgba(0, 0, 0, 0.12);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.charitable-donation-form ul.donation-amounts > li.donation-amount label {
	display: block;
	margin: 0;
	padding: 0.7rem 1rem;
	text-align: center;
	cursor: pointer;
}

.charitable-donation-form ul.donation-amounts > li.donation-amount .amount {
	color: #133047;          /* near-ink on the cyan fill — passes contrast */
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.charitable-donation-form.charitable-template-standard ul.donation-amounts > li.donation-amount:not(.custom-donation-amount):hover {
	filter: brightness(1.06);
	box-shadow:
		0 2px 4px -1px rgba(0, 0, 0, 0.2),
		0 4px 5px 0 rgba(0, 0, 0, 0.14),
		0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

/* Selected amount — muted/pressed, like the app's active tile */
.charitable-donation-form.charitable-template-standard ul.donation-amounts > li.donation-amount.selected:not(.custom-donation-amount) {
	background: #6f95a0;     /* desaturated accent */
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.25),
		0 1px 2px rgba(0, 0, 0, 0.15);
}

.charitable-donation-form ul.donation-amounts > li.donation-amount.selected .amount {
	color: #0f2433;
	font-weight: 700;
}

/* The native radio is redundant with whole-tile selection — hide it. */
.charitable-donation-form li.donation-amount input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

/* Empty description spans still take vertical space: the theme gives every
   `li span.description` a `margin: 5px auto` from a (0,5,1) selector, so the
   empty span under each amount pushes the number up off-centre. Match that
   specificity (template-standard + the same class chain) to hide it. */
.charitable-donation-form.charitable-template-standard .donation-amounts li span.description:empty {
	display: none;
}

/* ---- Custom-amount tile ------------------------------------------------- */
/* 1rem above the input (between it and the amount tiles), nothing below.
   The theme sets this list's margin from a (0,5,0) selector, so !important. */
.charitable-donation-form.charitable-template-standard ul.donation-amounts.donation-suggested-amount {
	display: block;
	margin: 1rem 0 0 !important;
	padding: 0;
	list-style: none;
}

/* The amount fieldset's 0.5em bottom padding is set `!important` by
   charitable.min.css (`…charitable-template-standard .charitable-fieldset`,
   padding:1em 20px 0.5em !important), so removing the gap below the custom
   input needs both a matching specificity AND !important. :has() targets only
   the fieldset that actually contains the suggested-amount list. */
.charitable-donation-form.charitable-template-standard .charitable-fieldset:has(ul.donation-suggested-amount) {
	padding-bottom: 0 !important;
}

/* No container around the custom-amount input — just the bare field. The theme
   wraps it in a bordered, padded <li> via a (0,5,2)-specificity selector
   (…donation-suggested-amount li), too specific to out-rank cleanly, so border
   and padding take !important. Strip all of it so only the white input shows
   (the standalone label is gone — see i18n). */
.charitable-donation-form.charitable-template-standard li.custom-donation-amount {
	display: block;
	background: transparent;
	border: none !important;
	border-radius: 0;
	padding: 0 !important;
	margin: 0;
	box-shadow: none;
}

/* The standalone "Egyéb összeg" label is dropped (its text is emptied in
   class-charitable-barion-i18n.php); the input's placeholder carries the
   prompt instead. Collapse the now-empty label so the input fills the whole
   tile. The radio inside the label stays in the DOM (absolutely positioned,
   below) so the form still submits a custom-amount selection.
   The wrapper's theme rule is pathologically specific
   (…donation-amounts.donation-suggested-amount span.custom-donation-amount-wrapper),
   so !important is the pragmatic override. */
.charitable-donation-form li.custom-donation-amount .custom-donation-amount-wrapper {
	display: flex !important;
	flex-direction: row !important;  /* theme sets column; we want the input on one line */
	align-items: center;
	/* Theme's (0,5,1) selector pads this 8px top/bottom — !important to clear it. */
	padding: 0 !important;
	margin: 0 !important;
}

.charitable-donation-form.charitable-template-standard li.custom-donation-amount .custom-donation-amount-wrapper > label {
	flex: 0 0 0;
	width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.charitable-donation-form.charitable-template-standard .custom-donation-input {
	flex: 1 1 auto;
	width: auto;
	/* The theme caps this via a (0,5,2)-specificity selector
	   (…donation-suggested-amount li input[type="text"]) — too specific to
	   out-rank cleanly, so !important is the right tool for this one prop. */
	max-width: 100% !important;
	min-width: 0;
	margin-top: 0;
	padding: 0.7rem 0.9rem;
	background: #ffffff;       /* white field — matches the name/email inputs */
	border: 1px solid rgba(138, 196, 208, 0.4);
	border-radius: var(--pswp-radius);
	color: #133047;            /* dark ink for contrast on white */
}

.charitable-donation-form.charitable-template-standard .custom-donation-input::placeholder {
	color: #5b6b78;            /* muted dark — readable on white, ≥4.5:1 */
}

.charitable-donation-form.charitable-template-standard .custom-donation-input:focus,
.charitable-donation-form.charitable-template-standard .custom-donation-input:focus-visible {
	border-color: var(--pswp-accent) !important;
	outline: 2px solid var(--pswp-accent) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(138, 196, 208, 0.35) !important;
}

/* ---- Text inputs (name / email) ---------------------------------------- */
.charitable-donation-form input[type="text"],
.charitable-donation-form input[type="email"],
.charitable-donation-form input[type="tel"],
.charitable-donation-form input[type="number"],
.charitable-donation-form select,
.charitable-donation-form textarea {
	background: var(--pswp-bg-elev);
	border: 1px solid rgba(138, 196, 208, 0.4);
	border-radius: var(--pswp-radius);
	color: var(--pswp-text);
}

.charitable-donation-form input::placeholder,
.charitable-donation-form textarea::placeholder {
	/* WCAG AA: the theme renders these inputs on a white fill, so the muted
	   token (#959595, ~2.4:1) failed. Use a darker gray that clears 4.5:1 on
	   white; still legible if the intended dark-blue fill applies. */
	color: #5b6b78;
	opacity: 1; /* Firefox dims placeholders by default */
}

/* Visible keyboard-focus indicator. The page theme (main.css) sets
   `input:focus { outline: none }` and its own box-shadow from a later-loading
   sheet, wiping any focus ring — a WCAG 2.4.7 failure for keyboard users. Scope
   with .charitable-template-standard and use a real outline (survives Windows
   high-contrast mode, which ignores box-shadow) plus the brand glow. */
.charitable-donation-form.charitable-template-standard input:focus,
.charitable-donation-form.charitable-template-standard input:focus-visible,
.charitable-donation-form.charitable-template-standard select:focus,
.charitable-donation-form.charitable-template-standard textarea:focus {
	border-color: var(--pswp-accent) !important;
	outline: 2px solid var(--pswp-accent) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(138, 196, 208, 0.35) !important;
}

/* Donor fields (name / email): centered label over a full-width input, so the
   inputs line up edge-to-edge with the amount tiles above instead of a narrow
   left-hugging box. */
.charitable-donation-form .charitable-form-field-text,
.charitable-donation-form .charitable-form-field-email {
	text-align: center;
}

.charitable-donation-form.charitable-template-standard .charitable-form-field-text > input,
.charitable-donation-form.charitable-template-standard .charitable-form-field-email > input {
	display: block;
	width: 100%;
	max-width: none;       /* theme caps inputs at calc(100% - 2rem); fill the field */
	box-sizing: border-box;
}

/* ---- Donate button — match the app's FIZETÉS (MUI contained cyan) ------- */
/* Center the (inline-block) button within its full-width submit field. */
.charitable-donation-form .charitable-submit-field {
	text-align: center;
}

/* The donate button colour is set by base.min.css (campaign layout), which
   loads AFTER this file, so colour/background here need !important — source
   order would otherwise hand the win to the theme's green. Layout-only props
   (padding, radius, transition) don't conflict and stay clean. */
.charitable-donation-form.charitable-template-standard .charitable-submit-field button,
.charitable-donation-form.charitable-template-standard button.donate-button,
.charitable-donation-form.charitable-template-standard button.button-primary {
	background-color: var(--pswp-accent) !important;
	background-image: none !important;
	color: #133047 !important;
	border: none !important;
	border-radius: 4px;
	opacity: 1;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-shadow: none;
	padding: 0.7rem 1.6rem;
	box-shadow:
		0 3px 1px -2px rgba(0, 0, 0, 0.2),
		0 2px 2px 0 rgba(0, 0, 0, 0.14),
		0 1px 5px 0 rgba(0, 0, 0, 0.12);
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.charitable-donation-form.charitable-template-standard .charitable-submit-field button:hover,
.charitable-donation-form.charitable-template-standard button.donate-button:hover,
.charitable-donation-form.charitable-template-standard button.button-primary:hover {
	background-color: var(--pswp-accent) !important;
	color: #133047 !important;
	filter: brightness(1.06);
	box-shadow:
		0 2px 4px -1px rgba(0, 0, 0, 0.2),
		0 4px 5px 0 rgba(0, 0, 0, 0.14),
		0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

/* Keyboard focus ring for the submit button (theme strips outlines). */
.charitable-donation-form.charitable-template-standard .charitable-submit-field button:focus-visible,
.charitable-donation-form.charitable-template-standard button.donate-button:focus-visible {
	outline: 2px solid var(--pswp-text) !important;
	outline-offset: 3px;
}

/* ---- Submit spinner ----------------------------------------------------
   Charitable shows a pixelated loading.gif while the donation is processing.
   Hide it and draw a crisp CSS arc spinner in the brand cyan instead. The
   container is toggled from display:none to block by Charitable's JS. */
.charitable-donation-form.charitable-template-standard .charitable-form-processing {
	display: none;
	justify-content: center;
	align-items: center;
	padding: 0.75rem 0;
}

/* When the form is processing, Charitable sets the wrapper to display:block
   inline — promote it to a centered flex row so the spinner sits centred. */
.charitable-donation-form.charitable-template-standard .charitable-form-processing[style*="block"],
.charitable-donation-form.charitable-template-standard .charitable-form-processing[style*="flex"] {
	display: flex !important;
}

.charitable-donation-form.charitable-template-standard .charitable-form-processing img {
	display: none;   /* hide the legacy gif */
}

.charitable-donation-form.charitable-template-standard .charitable-form-processing::before {
	content: "";
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 3px solid rgba(138, 196, 208, 0.25);   /* track */
	border-top-color: var(--pswp-accent);          /* moving arc */
	animation: pswp-spin 0.7s linear infinite;
}

@keyframes pswp-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.charitable-donation-form.charitable-template-standard .charitable-form-processing::before {
		animation: none;
		/* show a complete, static ring rather than a frozen partial arc */
		border-color: var(--pswp-accent);
		opacity: 0.6;
	}
}

/* ---- Notices & errors — semantic colors -------------------------------- */
/* Informational notice (e.g. test-mode): yellow. */
.charitable-donation-form .charitable-notice {
	background: var(--pswp-bg-elev);
	border: 1px solid rgba(244, 209, 96, 0.6); /* yellow = info/warning */
	border-radius: var(--pswp-radius);
	color: var(--pswp-text);
}
/* Validation errors: red — an error must not read as a warning. Full border +
   a red-tinted fill carry the error semantic (no side-stripe). */
.charitable-donation-form .charitable-form-errors {
	background: rgba(229, 115, 115, 0.16);
	border: 1px solid rgba(229, 115, 115, 0.75); /* red = error */
	border-radius: var(--pswp-radius);
	color: #ffe2e2; /* light red-tinted text on the dark fill, ≥4.5:1 */
}
.charitable-donation-form .charitable-form-errors a {
	color: #ffb3b3;
}
.charitable-donation-form .charitable-notice a {
	color: var(--pswp-accent);
}

/* ---- Donation receipt page ---------------------------------------------
   For Barion donations the receipt is intentionally minimal: a clear status
   banner + the bare facts (number, date, method). The monetary amount is
   deliberately NOT shown here — the donor already confirmed it at the Barion
   gateway, and a charity receipt reads warmer without re-quoting the sum.
   Rules are self-contained (the receipt page has no .charitable-donation-form
   wrapper) and scoped to body.campaign-donation-receipt — the body class
   Charitable adds only on the receipt endpoint — so nothing else is touched. */

/* The Phlox theme stacks ~158px of empty space above the receipt banner from
   three boxes (measured on the live page): the content column's 70px top pad,
   the page-header's 32px bottom pad, and the title block's 55px bottom margin.
   Collapse them on the receipt page only; the title + breadcrumb stay. */
body.campaign-donation-receipt .aux-primary {
	padding-top: 1.5rem;
}

body.campaign-donation-receipt .page-header {
	padding-bottom: 1rem;
}

/* The title block's bottom margin (55px) is set by the theme via
   `.page-title-section .page-header > .aux-container > :last-child` — a same-
   specificity selector that wins on source order. Match its shape under the
   receipt body class to out-rank it without !important. */
body.campaign-donation-receipt .page-title-section .page-header > .aux-container > :last-child {
	margin-bottom: 1rem;
}

/* Hide every monetary figure on the receipt:
   - summary.php: the "Összesen:" (Total) term + its value
   - details.php: the whole Campaign/Total table and its "Adomány" heading
     (a one-row table whose only data is the amount we're hiding earns nothing). */
body.campaign-donation-receipt .donation-summary .donation-total,
body.campaign-donation-receipt .donation-summary .donation-total + .donation-summary-value,
body.campaign-donation-receipt h3.charitable-header,
body.campaign-donation-receipt table.donation-details {
	display: none;
}

/* Status banner — prepended via charitable_donation_receipt_before. A real
   status element: full border + solid tint that holds up on the theme's light
   grey page (the earlier faint wash read as plain text). */
.charitable-barion-receipt-status {
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid;
	border-radius: var(--pswp-radius);
	font-weight: 600;
	line-height: 1.5;
	font-size: 1.0625rem;
}

.charitable-barion-receipt-status.charitable-success {
	background: #e7f3e0;
	border-color: #5f9c3f;          /* green — completed */
	color: #2c5618;
}

.charitable-barion-receipt-status.charitable-notice {
	background: #e2f0f4;
	border-color: #4a98ab;          /* eleven cyan, darkened for AA on the tint */
	color: #194150;
}

.charitable-barion-receipt-status.charitable-error {
	background: #f7e6e4;
	border-color: #c0392b;          /* red — failed/cancelled */
	color: #6f201a;
}

/* ---- Motion sensitivity ------------------------------------------------
   The tiles and donate button animate filter/box-shadow on hover/select.
   Honour prefers-reduced-motion by removing those transitions. */
@media (prefers-reduced-motion: reduce) {
	.charitable-donation-form.charitable-template-standard ul.donation-amounts > li.donation-amount,
	.charitable-donation-form.charitable-template-standard .charitable-submit-field button,
	.charitable-donation-form.charitable-template-standard button.donate-button,
	.charitable-donation-form.charitable-template-standard button.button-primary {
		transition: none !important;
	}
}

/* ---- Forced colors (Windows high-contrast) -----------------------------
   Decorative box-shadows vanish in forced-colors mode; ensure interactive
   elements keep a visible boundary and the focus ring uses system colors. */
@media (forced-colors: active) {
	.charitable-donation-form.charitable-template-standard ul.donation-amounts > li.donation-amount:not(.custom-donation-amount),
	.charitable-donation-form.charitable-template-standard .charitable-submit-field button {
		border: 1px solid ButtonText;
	}

	.charitable-donation-form.charitable-template-standard input:focus,
	.charitable-donation-form.charitable-template-standard .custom-donation-input:focus,
	.charitable-donation-form.charitable-template-standard .charitable-submit-field button:focus-visible {
		outline: 2px solid Highlight !important;
	}
}

/* ---- Mobile overflow guard ---------------------------------------------
   The Charitable campaign template (base.min.css) wraps the form in a
   `display: table` inner div with a large negative right margin, which bleeds
   the form past the viewport on narrow screens and triggers horizontal scroll.
   base.min.css loads AFTER this file, so these overrides need !important even
   at equal specificity. */
@media (max-width: 600px) {
	/* Collapse the display:table inner wrapper + its negative margin. */
	.charitable-campaign-field-inner {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
	}

	/* The campaign column adds 15px side padding on top of the theme's own page
	   gutter, so the form only fills ~70% of a phone screen. Drop it. */
	.charitable-campaign-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.charitable-donation-form,
	.charitable-donation-form .charitable-form-fields,
	.charitable-donation-form .charitable-fieldset {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;   /* fieldset defaults to min-width:min-content, which the tiles inflate past the viewport */
		box-sizing: border-box !important;
	}

	/* Keep "10 000 FT" on one line; the narrow mobile tile otherwise wraps it. */
	.charitable-donation-form ul.donation-amounts > li.donation-amount .amount {
		white-space: nowrap;
	}

	.charitable-donation-form ul.donation-amounts > li.donation-amount label {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

/* "Követeink" ambassador grid ([charitable_ambassadors]). People-cards: photo +
   name, linking to each ambassador's own page. No progress/donate clutter.
   Structural props use !important + a doubled class because the active theme
   (Phlox) applies `ul li` bullets and block layout with high specificity on
   post content, which otherwise collapses the grid into a bulleted list. */
.charitable-supercharged-ambassadors-grid.charitable-supercharged-ambassadors-grid {
	list-style: none !important;
	margin: 1.5rem 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	gap: 1.5rem !important;
}
.charitable-supercharged-ambassadors-grid > .charitable-supercharged-ambassador-card {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	background: none !important;
	text-indent: 0 !important;
}
.charitable-supercharged-ambassadors-grid > .charitable-supercharged-ambassador-card::before,
.charitable-supercharged-ambassadors-grid > .charitable-supercharged-ambassador-card::marker {
	content: none !important;
	display: none !important;
}
.charitable-supercharged-ambassadors-heading {
	margin: 1.5rem 0 0.5rem;
}
.charitable-supercharged-ambassador-link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
}
/* Keyboard focus ring (WCAG 2.4.7). The active theme strips outlines globally,
   so set an explicit, visible focus ring — matches the donation-form pattern. */
.charitable-supercharged-ambassador-link:focus-visible {
	outline: 2px solid var(--pswp-accent, #8AC4D0);
	outline-offset: 3px;
}
.charitable-supercharged-ambassador-link:focus-visible .charitable-supercharged-ambassador-name {
	text-decoration: underline;
}
/* The photo wrapper caps the size so a full-width mobile card can't blow the
   avatar up; the img/avatar fills it. !important beats the theme's img{width}
   and the gravatar width/height attrs. */
.charitable-supercharged-ambassador-photo {
	display: block;
	width: 132px;
	max-width: 70%;
	margin: 0 auto 0.75rem;
}
.charitable-supercharged-ambassador-img,
.charitable-supercharged-ambassador-photo img,
.charitable-supercharged-ambassador-photo .avatar {
	width: 100% !important;
	height: auto !important;
	max-width: 132px !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50% !important;
	margin: 0 auto;
	display: block;
}
.charitable-supercharged-ambassador-name {
	display: block;
	font-weight: 600;
}
.charitable-supercharged-ambassador-link:hover .charitable-supercharged-ambassador-name {
	text-decoration: underline;
}