/*!
 * Miix Donate — donation form styles
 *
 * Designed to be self-contained: no dependency on theme or framework classes.
 *
 * The default palette is intentionally grayscale so the plugin doesn't impose
 * a brand on charities that haven't customized it yet. Drop a stylesheet at
 * <theme>/miix-donate/donate.css and override the CSS custom properties on
 * .miix-donate-wrap to brand it. See the docblock in that override file (or
 * the README) for the full list of variables.
 *
 * Two custom properties drive the focus glow on inputs and the box-shadow
 * around the active "amount" pill: --miix-focus-glow and --miix-primary-rgb.
 * The latter is the comma-separated RGB triple of --miix-primary, used to
 * build rgba() values dynamically. Themes that override --miix-primary
 * should also override --miix-primary-rgb so the glow matches.
 */

/* Custom properties on both the inline form wrapper and the modal outer so
   the modal trigger button (which sits inside .miix-donate-modal-outer but
   outside .miix-donate-wrap) inherits the same brand tokens. Themes that
   override these on .miix-donate-wrap should also target
   .miix-donate-modal-outer, or set them on a shared ancestor (e.g. body). */
.miix-donate-wrap,
.miix-donate-modal-outer {
	--miix-primary: #475569;            /* slate-600 */
	--miix-primary-dark: #334155;       /* slate-700 */
	--miix-primary-bg: #f1f5f9;         /* slate-100 */
	--miix-primary-border: #cbd5e1;     /* slate-300 */
	--miix-primary-rgb: 71, 85, 105;    /* RGB triple of --miix-primary */
	--miix-cta: #475569;                /* CTA defaults to primary; override per brand */
	--miix-cta-hover: #334155;
	--miix-text: #333;
	--miix-muted: #666;
	--miix-input-border: #ccc;
	--miix-error: #c00;
	--miix-radius: 6px;
}

.miix-donate-wrap {
	font-family: inherit;
	color: var(--miix-text);
}

/* Honeypot — hidden from sight and screen readers but visible to bots. */
.miix-donate-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Banner shown after a Mollie return redirect. */
.miix-donate-banner {
	padding: 14px 18px;
	border-radius: var(--miix-radius);
	margin-bottom: 20px;
	border: 1px solid transparent;
}
.miix-donate-banner-success    { background: var(--miix-primary-bg); border-color: var(--miix-primary-border); color: var(--miix-primary-dark); }
.miix-donate-banner-processing { background: #fff8e6; border-color: #f0d68a; color: #6b4d00; }
.miix-donate-banner-canceled,
.miix-donate-banner-failed     { background: #fdecec; border-color: #f3b8b8; color: #8a1f1f; }

/* ----- Layout grid -------------------------------------------------- */

.miix-donate-form {
	display: block;
}

.miix-donate-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin-bottom: 16px;
}

.miix-donate-row > .miix-donate-field {
	grid-column: 1 / -1;
	/* Strip the field's own bottom margin when it lives inside a row.
	   The row's margin-bottom (above) and the row's grid `gap` together
	   own all the spacing, so we don't double up. On mobile the gap
	   becomes vertical and continues to provide 16px between fields. */
	margin-bottom: 0;
}

/* Two-column row: name fields */
.miix-donate-row .miix-donate-field-firstname { grid-column: 1 / 4; }
.miix-donate-row .miix-donate-field-lastname  { grid-column: 4 / 7; }

/* Three-column row: postal code / house number / addition */
.miix-donate-row-address .miix-donate-field-postalcode  { grid-column: 1 / 3; }
.miix-donate-row-address .miix-donate-field-housenumber { grid-column: 3 / 5; }
.miix-donate-row-address .miix-donate-field-addition    { grid-column: 5 / 7; }

/* Two-column row: street / city */
.miix-donate-row .miix-donate-field-street { grid-column: 1 / 4; }
.miix-donate-row .miix-donate-field-city   { grid-column: 4 / 7; }

/* ----- Headings ----------------------------------------------------- */

.miix-donate-heading,
.miix-donate-section-heading {
	margin: 24px 0 16px;
	font-size: 22px;
	font-weight: 700;
}
.miix-donate-heading:first-child {
	margin-top: 0;
}

/* ----- Field shell -------------------------------------------------- */

.miix-donate-field {
	margin-bottom: 16px;
}

/* Reset fieldset's browser-default border, padding, and min-width:0
   so a fieldset wrapper looks identical to the div wrapper it replaced
   for the radio groups. min-width:0 fixes a long-standing Chrome/FF
   bug where fieldsets refuse to shrink below their intrinsic content
   width even inside a flex/grid parent. */
fieldset.miix-donate-field {
	border: 0;
	padding: 0;
	margin-inline: 0;
	min-width: 0;
}

/* The :not() exclusions keep this rule from clobbering labels that
   carry their own visual treatment:
   - .miix-donate-checkbox is the newsletter opt-in label, which has its
     own padding/font-size/border/background block further down the file
   - .miix-donate-radio is the wrapper for each radio pill, also styled
     elsewhere with pill-specific padding and centering */
.miix-donate-field label:not(.miix-donate-checkbox):not(.miix-donate-radio),
.miix-donate-field .miix-donate-question,
.miix-donate-field > legend {
	display: block;
	width: 100%;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	padding: 0;
	color: var(--miix-text);
}

.miix-donate-field .req {
	color: var(--miix-error);
	font-weight: 700;
	margin-left: 2px;
}

/* Screen-reader-only utility class. Used on legends that should be
   announced by assistive tech but visually hidden because their visible
   context is provided by a nearby section heading. Standard WordPress
   .screen-reader-text pattern, namespaced. */
.miix-donate-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.miix-donate-desc {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--miix-muted);
	line-height: 1.4;
}

/* ----- Floating labels --------------------------------------------- */

/* Pure-CSS floating labels using :placeholder-shown.
 *
 * The trick: every input has placeholder=" " (a single space) so the
 * input technically always has a placeholder. The :placeholder-shown
 * pseudo-class is true when that placeholder is visible — i.e. when
 * the user has not typed anything yet. As soon as the user types,
 * :placeholder-shown becomes false and our :not() selector activates,
 * sliding the label up to its compact "filled" position. :focus does
 * the same thing while the input is being typed in. The label needs
 * to live *after* the input in the DOM so we can use the + sibling
 * combinator to target it. The whole pattern requires zero JavaScript.
 */
.miix-donate-floating {
	position: relative;
}

.miix-donate-floating > input[type="text"],
.miix-donate-floating > input[type="email"],
.miix-donate-floating > input[type="tel"] {
	/* Bootstrap-style floating labels: input is taller than usual (~58px)
	   with symmetric vertical padding in the resting state. When the label
	   floats, the input's padding shifts (top grows, bottom shrinks) to
	   push the user's typed text down into the lower 2/3 of the box,
	   making room for the floated label above it. The shift is animated
	   so the typed text doesn't jump. */
	min-height: 58px;
	padding: 16px 14px;
	transition: padding 0.15s ease, border-color 0.2s, box-shadow 0.2s;
}

/* When the input has content (or focus while still empty), shift the
   padding so the typed text sits in the lower half of the box, leaving
   the upper portion for the floated label. */
.miix-donate-floating > input[type="text"]:focus,
.miix-donate-floating > input[type="text"]:not(:placeholder-shown),
.miix-donate-floating > input[type="email"]:focus,
.miix-donate-floating > input[type="email"]:not(:placeholder-shown),
.miix-donate-floating > input[type="tel"]:focus,
.miix-donate-floating > input[type="tel"]:not(:placeholder-shown) {
	padding-top: 26px;
	padding-bottom: 6px;
}

.miix-donate-floating > label {
	/* Pinned at the input's top-left corner, then translated into the
	   resting position via transform. Keeping movement on transform
	   (rather than top/font-size) means the animation runs on the GPU
	   compositor — no layout thrashing on every frame. */
	position: absolute;
	top: 0;
	left: 14px;
	/* Resting state: label sits in the vertical center of the input box,
	   full 16px size, in muted gray — visually identical to the
	   placeholder text it temporarily replaces. */
	transform: translateY(16px) scale(1);
	transform-origin: left top;
	pointer-events: none;
	color: var(--miix-muted);
	font-size: 16px;
	font-weight: 400;
	/* line-height: 1.2 keeps descenders like the 'g' in "Toevoeging" inside
	   the line box so they aren't clipped by overflow: hidden. */
	line-height: 1.2;
	margin: 0;
	transition: transform 0.15s ease, color 0.15s ease;
	background: transparent;
	max-width: calc(100% - 28px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Promote to its own compositor layer so transform animations don't
	   trigger a first-frame paint stutter. */
	will-change: transform;
}

/* Floated state: label translates up to sit just inside the top of the
   input box (translateY 6px) and scales to 0.85 (≈13.6px effective size,
   matching Bootstrap's pattern — much more readable than 0.7 would be).
   The input's padding shift (above) makes room for the label by pushing
   the typed text down.
   Uses the general sibling combinator (~) rather than the adjacent one
   (+) so it still matches when JS injects elements between the input
   and the label — the IBAN validation status div is the obvious case. */
.miix-donate-floating > input:focus ~ label,
.miix-donate-floating > input:not(:placeholder-shown) ~ label {
	transform: translateY(6px) scale(0.85);
	color: var(--miix-primary);
}

/* Error state: when the field has the .has-error class, color the
   floated label red so the donor sees the highlighted field's purpose
   even after they fix their input. */
.miix-donate-floating.has-error > input:focus ~ label,
.miix-donate-floating.has-error > input:not(:placeholder-shown) ~ label {
	color: var(--miix-error);
}

/* The required-field asterisk needs to keep its red color regardless
   of the label's parent-color shifts. */
.miix-donate-floating > label .req {
	color: var(--miix-error);
}

/* ----- Inputs ------------------------------------------------------- */

.miix-donate-form input[type="text"],
.miix-donate-form input[type="email"],
.miix-donate-form input[type="tel"],
.miix-donate-form select {
	width: 100%;
	padding: 12px 14px;
	font-size: 16px;
	border: 1px solid var(--miix-input-border);
	border-radius: var(--miix-radius);
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
	font-family: inherit;
	background: #fff;
}

.miix-donate-form input[type="text"]:focus,
.miix-donate-form input[type="email"]:focus,
.miix-donate-form input[type="tel"]:focus,
.miix-donate-form select:focus {
	border-color: var(--miix-primary);
	outline: none;
	/* Driven by --miix-primary-rgb so theme overrides flow through to the
	   focus glow without each theme having to also override the shadow. */
	box-shadow: 0 0 0 2px rgba(var(--miix-primary-rgb), 0.15);
}

/* ----- Radio pills -------------------------------------------------- */

.miix-donate-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.miix-donate-radio {
	margin: 0;
	position: relative;
}

.miix-donate-radio input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* The "Other amount" pill label contains TWO spans — the visible text label
   and a .miix-donate-euro-prefix span that holds the € glyph shown next to
   the input when the donor picks "Other". The pill styling below must only
   match the text-label span, never the prefix; otherwise the prefix
   inherits pill background + border + width and visually covers the
   underlying input. We exclude .miix-donate-euro-prefix explicitly. */
.miix-donate-radio span:not(.miix-donate-euro-prefix) {
	display: block;
	padding: 12px 24px;
	background: #f0f0f0;
	border: 2px solid #ddd;
	border-radius: var(--miix-radius);
	font-size: 16px;
	font-weight: 600;
	color: var(--miix-text);
	text-align: center;
	cursor: pointer;
	transition: all 0.2s;
}

.miix-donate-radio:hover span:not(.miix-donate-euro-prefix) {
	border-color: var(--miix-primary);
	background: var(--miix-primary-bg);
}

.miix-donate-radio input[type="radio"]:checked + span {
	background: var(--miix-primary);
	border-color: var(--miix-primary);
	color: #fff;
}

/* ----- "Other amount" input swap ------------------------------------ */

.miix-donate-amount-other {
	width: 190px;
}
.miix-donate-amount-other span:not(.miix-donate-euro-prefix) {
	width: 190px;
	box-sizing: border-box;
}
/* The selector deliberately includes input[type="text"] so its specificity
   beats the generic .miix-donate-form input[type="text"] rule above —
   without it the generic 12px/14px padding wins on column-3 specificity
   and the € glyph ends up touching the input text. */
.miix-donate-amount-other input[type="text"].miix-donate-other-input {
	display: none;
	width: 190px;
	/* Left padding leaves room for the absolutely-positioned €  glyph
	   (which sits at left: 12px and is ~12px wide at 16px font). */
	padding: 12px 24px 12px 36px;
	border: 2px solid var(--miix-primary);
	border-radius: var(--miix-radius);
	font-size: 16px;
	font-weight: 600;
	background: var(--miix-primary-bg);
	box-sizing: border-box;
}
.miix-donate-amount-other .miix-donate-euro-prefix {
	display: none;
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	font-weight: 600;
	color: var(--miix-text);
	pointer-events: none;
	background: none;
	border: none;
	padding: 0;
	width: auto;
	z-index: 1;
}

/* When the "other" radio is selected, JS adds .is-other to the wrapper.
   The .miix-donate-other-input selector matches input[type="text"] for the
   same specificity reason explained above. */
.miix-donate-amount-other.is-other span:not(.miix-donate-euro-prefix) { display: none; }
.miix-donate-amount-other.is-other input[type="text"].miix-donate-other-input { display: block; }
.miix-donate-amount-other.is-other .miix-donate-euro-prefix { display: block; }

/* ----- Newsletter checkbox ----------------------------------------- */

.miix-donate-field-newsletter .miix-donate-question {
	display: none; /* the label itself carries the question */
}

.miix-donate-checkbox {
	display: block;
	position: relative;
	padding: 12px 16px 12px 46px;
	background: var(--miix-primary-bg);
	border: 1px solid var(--miix-primary-border);
	border-radius: var(--miix-radius);
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
	line-height: 1.4;
	transition: border-color 0.2s, background 0.2s;
}
.miix-donate-checkbox:hover {
	border-color: var(--miix-primary);
	background: #eaf5ed;
}
.miix-donate-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.miix-donate-checkbox::before {
	content: '';
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border: 2px solid #b0b0b0;
	border-radius: 4px;
	background: #fff;
	transition: border-color 0.2s, background 0.2s;
}
.miix-donate-checkbox:has(input:checked)::before {
	background: var(--miix-primary);
	border-color: var(--miix-primary);
}
.miix-donate-checkbox:has(input:checked)::after {
	content: '';
	position: absolute;
	left: 23px;
	top: 50%;
	width: 6px;
	height: 11px;
	margin-top: -7px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* ----- Conditional sections --------------------------------------- */

/* Sections gated by frequency (monthly vs one-time). Hidden by default;
   the JS adds .is-active to the matching section when the radio changes. */
.miix-donate-section[data-when-frequency] {
	display: none;
}
.miix-donate-section.is-active {
	display: block;
}

/* Elements gated by payment method. The JS adds .is-active to whichever
   one matches the currently-selected radio. We use :not(.is-active) to
   apply display:none ONLY when the element is hidden — the active state
   has no display rule at all, so each element falls through to whatever
   its own stylesheet says (block for the IBAN field wrapper, flex for
   the payment-methods badge). Using `display: revert` in the active
   state would have reverted to the user-agent default (block), losing
   the badge's own `display: flex` declaration to the more-specific
   active-state selector. */
[data-when-payment]:not(.is-active) {
	display: none;
}

/* ----- Payment-methods badge --------------------------------------- */

/* Sits below the Pay online / Direct debit radio group, showing the
   iDEAL/Wero/cards icons next to a one-line note explaining what
   "Pay online" actually includes. The img height caps the visual
   weight of the badge so a high-resolution PNG doesn't dominate the
   form; the text takes up the remaining horizontal space. */
.miix-donate-pay-methods-note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--miix-muted);
	line-height: 1.4;
}
.miix-donate-pay-methods-note img {
	height: 22px;
	width: auto;
	flex-shrink: 0;
	display: block;
}

/* Short "Pay securely via:" lead before the icon row. The parent
   .miix-donate-pay-methods-note is a flex row with a 12px gap, so the
   lead sits left of the icons; flex-shrink:0 keeps it on one line
   while the icon row wraps. */
.miix-donate-pay-methods-lead {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--miix-muted);
}

/* Live Mollie method icons. Each icon is a small SVG; they wrap onto
   a second line on narrow screens rather than overflowing. The
   generic rule above sets the height; this just lays them out. */
.miix-donate-pay-methods-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.miix-donate-pay-methods-icons .miix-donate-pay-method-icon {
	height: 28px;
	width: auto;
	display: block;
}
.miix-donate-pay-methods-icons .miix-donate-pay-method-text {
	font-size: 13px;
	color: var(--miix-muted);
	padding: 0 4px;
}

/* ----- "Powered by" attribution ----------------------------------- */

.miix-donate-attribution {
	margin-top: 10px;
	font-size: 11px;
	color: var(--miix-muted);
	text-align: center;
}
.miix-donate-attribution a {
	color: inherit !important;
	text-decoration: none;
}
.miix-donate-attribution a:hover {
	text-decoration: underline;
}

/* ----- Summary box ------------------------------------------------ */

.miix-donate-summary {
	font-size: 15px;
	color: var(--miix-text);
	background: var(--miix-primary-bg);
	border: 1px solid var(--miix-primary-border);
	border-radius: var(--miix-radius);
	padding: 12px 16px;
	margin: 10px 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
	border-width: 0;
	transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.3s ease, margin 0.3s ease, border-width 0.3s ease;
}
.miix-donate-summary.is-visible {
	max-height: 80px;
	opacity: 1;
	padding: 12px 16px;
	margin: 10px 0;
	border-width: 1px;
}
.miix-donate-summary strong {
	text-transform: uppercase;
}

/* ----- PDOK status + IBAN status ----------------------------------- */

/* No min-height here — when the status is empty we want zero vertical
   footprint. The :empty rule below also strips the margins so the
   address fields collapse tight against the postal code row until the
   donor's lookup actually produces a status string. Once a string is
   present, the regular margin kicks in. One small layout shift when
   the first lookup runs, which is the right trade. */
.miix-donate-pdok-status {
	font-size: 13px;
	margin: -8px 0 12px;
}
.miix-donate-pdok-status:empty {
	margin: 0;
}
.miix-donate-pdok-status.is-loading { color: var(--miix-muted); }
.miix-donate-pdok-status.is-found   { color: var(--miix-primary-dark); }
.miix-donate-pdok-status.is-error   { color: var(--miix-error); }

/* No min-height here — when the status is empty we want zero vertical
   footprint. The :empty rule below also strips the margin-top so the
   description paragraph collapses tight against the input until the
   donor types something. Once a status string is present, the regular
   margin kicks in and pushes the description down by one line.
   That's a one-time, acceptable layout shift. */
.miix-donate-iban-status {
	font-size: 13px;
	margin-top: 4px;
}
.miix-donate-iban-status:empty {
	margin: 0;
}
.miix-donate-iban-status.is-ok    { color: var(--miix-primary-dark); }
.miix-donate-iban-status.is-error { color: var(--miix-error); }
input.miix-donate-iban-valid   { border-color: var(--miix-primary-dark) !important; }
input.miix-donate-iban-invalid { border-color: var(--miix-error) !important; }

/* ----- Submit button ----------------------------------------------- */

.miix-donate-submit-row {
	margin-top: 24px;
}

.miix-donate-submit {
	display: block;
	width: 100%;
	padding: 14px 40px;
	background: var(--miix-cta);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.5px;
	border: none;
	border-radius: var(--miix-radius);
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.2s;
}
.miix-donate-submit:hover {
	background: var(--miix-cta-hover);
}

/* ----- Field-level error states (server-side validation) ---------- */

.miix-donate-field.has-error input,
.miix-donate-field.has-error select {
	border-color: var(--miix-error);
}
.miix-donate-field-error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--miix-error);
}

/* ----- Admin list view: status pills ------------------------------ */

.miix-donate-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: #eee;
	color: #333;
}
.miix-donate-status-paid       { background: #d6ecdc; color: #1a5a30; }
.miix-donate-status-pending    { background: #fff0c2; color: #6b4d00; }
.miix-donate-status-collected  { background: #d6ecdc; color: #1a5a30; }
.miix-donate-status-failed,
.miix-donate-status-canceled,
.miix-donate-status-expired,
.miix-donate-status-refunded   { background: #f8d6d6; color: #6b1a1a; }

/* ----- Reduced motion --------------------------------------------- */

/* Respect the user's OS-level "reduce motion" preference. The floating
   labels, summary box, and input padding shifts all use transitions that
   can be disorienting or trigger vestibular issues for users with motion
   sensitivity. WCAG 2.3.3 (Animation from Interactions, Level AAA) and
   the broader prefers-reduced-motion media query both recommend disabling
   non-essential motion when this is set. We swap the transitions to
   `none` rather than `0s` so the changes still apply, just instantly. */
@media (prefers-reduced-motion: reduce) {
	.miix-donate-floating > label,
	.miix-donate-floating > input[type="text"],
	.miix-donate-floating > input[type="email"],
	.miix-donate-floating > input[type="tel"],
	.miix-donate-summary,
	.miix-donate-form input[type="text"],
	.miix-donate-form input[type="email"],
	.miix-donate-form select,
	.miix-donate-radio span,
	.miix-donate-checkbox,
	.miix-donate-submit {
		transition: none;
	}
}

/* ----- Color contrast notes --------------------------------------- *
 * The plugin's default palette is grayscale (slate-600 family) and the
 * brand color tokens (--miix-primary, --miix-cta, --miix-error) all hit
 * WCAG AA contrast ratios when used on the white form background:
 *
 *   --miix-primary  #475569 on #fff = 7.2:1  (passes AA + AAA normal text)
 *   --miix-text     #333333 on #fff = 12.6:1 (passes AAA)
 *   --miix-muted    #666666 on #fff = 5.7:1  (passes AA normal, AAA large)
 *   --miix-error    #cc0000 on #fff = 5.9:1  (passes AA normal text)
 *
 * The CTA button uses --miix-cta as the background and white text on it.
 * For the default slate palette this is 7.2:1 (white on slate-600). Themes
 * that override --miix-cta to a brighter color (e.g. Eyes on Animals'
 * orange #ff6600 = 3.9:1) need to verify the contrast against bold 18px
 * text — that's "large text" by WCAG, threshold is 3:1, so most brand
 * orange / red CTA colors will still pass.
 */

/* ----- Mobile ------------------------------------------------------ */

@media only screen and (max-width: 600px) {
	.miix-donate-row {
		grid-template-columns: 1fr;
		/* Keep the gap at 16px on mobile. CSS grid's `gap` automatically
		   applies to the stacking axis when the columns collapse to one,
		   so this becomes the vertical spacing between fields and we
		   don't need to put margin back on the individual fields. */
		gap: 16px;
	}
	.miix-donate-row > .miix-donate-field,
	.miix-donate-row .miix-donate-field-firstname,
	.miix-donate-row .miix-donate-field-lastname,
	.miix-donate-row-address .miix-donate-field-postalcode,
	.miix-donate-row-address .miix-donate-field-housenumber,
	.miix-donate-row-address .miix-donate-field-addition,
	.miix-donate-row .miix-donate-field-street,
	.miix-donate-row .miix-donate-field-city {
		grid-column: 1;
	}

	.miix-donate-radio-group {
		flex-direction: column;
	}

	.miix-donate-amount-other,
	.miix-donate-amount-other span,
	.miix-donate-amount-other .miix-donate-other-input {
		width: 100%;
	}

	.miix-donate-submit {
		padding: 16px;
	}

	.miix-donate-pay-methods-note {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ----- Modal ------------------------------------------------------- */

/* Trigger button rendered by [miix_donate modal="true"]. Lives outside
   .miix-donate-wrap so it inherits CSS custom properties from a parent
   theme element if the theme sets them there; the fallback values below
   match the defaults defined on .miix-donate-wrap. */
.miix-donate-modal-trigger {
	display: inline-block;
	padding: 14px 40px;
	background: var(--miix-cta);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.5px;
	border: none;
	border-radius: var(--miix-radius);
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.2s;
}
.miix-donate-modal-trigger:hover {
	background: var(--miix-cta-hover);
}
/* Prevent theme button :focus styles (often background:white) from flashing
   when the modal's close() returns focus to the trigger. */
.miix-donate-modal-trigger:focus {
	background: var(--miix-cta);
	outline: none;
}
.miix-donate-modal-trigger:focus-visible {
	background: var(--miix-cta);
	outline: 2px solid rgba(var(--miix-primary-rgb), 0.5);
	outline-offset: 3px;
}

/* Backdrop */
.miix-donate-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s;
}
.miix-donate-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* Modal dialog */
.miix-donate-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	z-index: 99999;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
	width: min(680px, calc(100vw - 32px));
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
}
.miix-donate-modal.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

/* Prevent the page behind from scrolling while the modal is open */
body.miix-donate-modal-open {
	overflow: hidden;
}

/* Close button (×) pinned to the top-right corner */
.miix-donate-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--miix-muted);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--miix-radius);
	font-family: inherit;
	transition: color 0.15s, background 0.15s;
}
.miix-donate-modal-close:hover {
	color: var(--miix-text);
	background: var(--miix-primary-bg);
}

/* Inner padding that wraps .miix-donate-wrap */
.miix-donate-modal-content {
	padding: 44px 40px 40px;
}

/* Mobile: full-width sheet sliding up from the bottom */
@media only screen and (max-width: 600px) {
	.miix-donate-modal {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(24px);
		width: 100%;
		max-height: 92vh;
		border-radius: 12px 12px 0 0;
	}
	.miix-donate-modal.is-open {
		transform: translateY(0);
	}
	.miix-donate-modal-content {
		padding: 36px 20px 28px;
	}
	.miix-donate-modal-trigger {
		display: block;
		width: 100%;
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.miix-donate-modal,
	.miix-donate-modal-overlay,
	.miix-donate-modal-trigger,
	.miix-donate-modal-close {
		transition: none;
	}
}

/* ----- Thank-you page confirmation block -------------------------- */
/* Rendered by [miix_donate_thanks] on the configured thank-you page.
   Kept self-contained (not scoped under .miix-donate-wrap) because the
   thanks block often lives on a page without the form shortcode. Uses
   the same primary color tokens so theme-overridden palettes flow
   through automatically. */

.miix-donate-thanks {
	max-width: 560px;
	margin: 24px auto;
	padding: 32px 28px;
	text-align: center;
	color: var(--miix-text);
	font-family: inherit;
}

.miix-donate-thanks-heading {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 1.2;
	color: var(--miix-primary);
	font-weight: 700;
}

.miix-donate-thanks-message {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--miix-text);
}

.miix-donate-thanks-summary {
	display: inline-block;
	min-width: 200px;
	padding: 24px 32px;
	background: var(--miix-primary-bg);
	border: 1px solid var(--miix-primary-border);
	border-radius: var(--miix-radius);
}

.miix-donate-thanks-amount {
	font-size: 32px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--miix-primary);
}

.miix-donate-thanks-frequency {
	margin-top: 6px;
	font-size: 13px;
	color: var(--miix-muted);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}