/*
 * WP Donation Plugin v6 — donation-form.css
 *
 * All colours, fonts, and radii use CSS custom properties.
 * Variables fall back in order:
 *   1. Value injected by WDP_Theme (reads Elementor Kit / theme.json / Customizer)
 *   2. Elementor's own :root variables (--e-global-color-accent etc.) — zero PHP needed
 *      when Elementor is rendering the page
 *   3. WordPress Global Styles variables (--wp--preset--color--primary etc.)
 *   4. Hard-coded neutral defaults (look good on any site)
 *
 * The entire block is scoped to .wdp-form-wrap so nothing leaks out.
 */

/* ── Design tokens — all colours/fonts live here ──────────────────────────── */
.wdp-form-wrap {

    /* ── Primary / action colour ─────────────────────────────────────────────
     * Fallback chain:
     *  1. PHP-injected from Elementor Global Kit / theme.json / Customizer
     *  2. Elementor :root runtime variables (injected by Elementor JS)
     *  3. WordPress FSE preset variables
     *  4. Hard-coded indigo default
     */
    --wdp-primary:       var(--e-global-color-accent,
                         var(--e-global-color-primary,
                         var(--wp--preset--color--primary,
                         var(--wp--preset--color--vivid-cyan-blue,
                         #5469d4))));

    --wdp-primary-hover: var(--e-global-color-accent-dark, #3d51b5);
    --wdp-primary-light:      rgba(84, 105, 212, 0.08);
    --wdp-primary-ultralight:  rgba(84, 105, 212, 0.04);

    /* --wdp-focus: safe blue for input focus rings — never inherits a jarring theme colour.
       Input focus should always be calm and recognisable regardless of brand primary. */
    --wdp-focus:        #4f6ef2;
    --wdp-focus-ring:   rgba(79, 110, 242, 0.25);

    /* ── Text colours ───────────────────────────────────────────────────── */
    --wdp-text:          var(--e-global-color-text,
                         var(--wp--preset--color--foreground,
                         var(--wp--preset--color--contrast,
                         var(--wp--preset--color--base,
                         #1d2327))));

    --wdp-text-muted:    var(--e-global-color-secondary-text,
                         rgba(29, 35, 39, 0.55));

    /* ── Surface ────────────────────────────────────────────────────────── */
    --wdp-surface:       var(--wp--preset--color--background,
                         var(--wp--preset--color--base,
                         #ffffff));

    /* ── Borders ────────────────────────────────────────────────────────── */
    --wdp-border:        #ddd;
    --wdp-border-focus:  var(--wdp-focus);

    /* ── Typography ─────────────────────────────────────────────────────── */
    --wdp-font:          var(--e-global-typography-text-font-family,
                         var(--wp--preset--font-family--body,
                         var(--wp--preset--font-family--base,
                         var(--wp--preset--font-family--system-font,
                         inherit))));

    --wdp-font-heading:  var(--e-global-typography-primary-font-family,
                         var(--wp--preset--font-family--heading,
                         var(--wdp-font)));

    --wdp-font-size:     var(--wp--preset--font-size--normal,
                         var(--wp--preset--font-size--medium,
                         var(--e-global-typography-text-font-size,
                         1rem)));

    --wdp-font-weight:   var(--e-global-typography-text-font-weight, 400);
    --wdp-line-height:   var(--e-global-typography-text-line-height, 1.6);

    /* ── Spacing & radius ───────────────────────────────────────────────── */
    --wdp-radius:        var(--e-global-border-radius,
                         var(--wp--custom--border-radius,
                         var(--wp--style--global--content-size,
                         6px)));
    --wdp-radius-lg:     calc(var(--wdp-radius) + 4px);
    --wdp-space:         1rem;

    /* ── Brand colours that never inherit ──────────────────────────────── */
    --wdp-bancontact:       #ff4785;
    --wdp-bancontact-hover: #e53070;
    /* Keep legacy name for backwards compat */
    --wdp-payconiq:         #ff4785;
    --wdp-payconiq-hover:   #e53070;

    /* ── Semantic status colours ─────────────────────────────────────── */
    --wdp-success:  #27ae60;
    --wdp-error:    #c0392b;
    --wdp-warning:  #f39c12;

    /* ── Apply to the element ───────────────────────────────────────────── */
    font-family:  var(--wdp-font);
    font-size:    var(--wdp-font-size);
    font-weight:  var(--wdp-font-weight);
    line-height:  var(--wdp-line-height);
    color:        var(--wdp-text);
    max-width:    480px;
    margin:       0 auto;
}

/* ── Hard reset — neutralise any theme button/input/a overrides ─────────────
   Elementor and many themes apply text-transform, letter-spacing, font-weight
   to all buttons globally. We lock these down for every element inside the form. */
.wdp-form-wrap button,
.wdp-form-wrap input,
.wdp-form-wrap textarea,
.wdp-form-wrap select {
    text-transform:   none !important;
    letter-spacing:   normal !important;
    font-style:       normal !important;
    box-shadow:       none !important;
}
.wdp-form-wrap a {
    text-decoration:  none;
}
/* Re-allow focus box-shadow per element below using !important */

/* Amount buttons ─────────────────────────────────────────────────────── */
.wdp-heading {
    font-size: calc(var(--wdp-font-size) * 1.2);
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--wdp-text);
    font-family: var(--wdp-font-heading);
}

.wdp-amounts {
    display:       grid;
    grid-template-columns: repeat(3, 1fr);
    gap:           8px;
    margin-bottom: var(--wdp-space);
}

.wdp-form-wrap .wdp-amount-btn {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    justify-content: center !important;
    gap:            4px !important;
    padding:        10px 8px !important;
    min-height:     52px !important;
    border:         1.5px solid var(--wdp-border) !important;
    border-radius:  var(--wdp-radius) !important;
    background:     var(--wdp-surface) !important;
    font-size:      var(--wdp-font-size) !important;
    font-family:    var(--wdp-font) !important;
    font-weight:    600 !important;
    color:          var(--wdp-text) !important;
    cursor:         pointer !important;
    transition:     border-color .15s, background .15s, color .15s, box-shadow .15s;
    text-align:     center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.wdp-form-wrap .wdp-amount-btn:hover {
    border-color: var(--wdp-primary);
    color:        var(--wdp-primary);
    background:   var(--wdp-primary-light);
}
.wdp-form-wrap .wdp-amount-btn.selected {
    border-color: var(--wdp-primary) !important;
    background:   var(--wdp-primary) !important;
    color:        #fff !important;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--wdp-primary) 30%, transparent) !important;
}
.wdp-form-wrap .wdp-amount-btn:focus-visible {
    outline:        2px solid var(--wdp-focus);
    outline-offset: 2px;
}

@media (max-width: 400px) {
    .wdp-amounts { grid-template-columns: repeat(2, 1fr); }
}

.wdp-custom-amount { margin: .75rem 0 var(--wdp-space); }
.wdp-custom-amount label { display: block; font-size: .875em; color: var(--wdp-text-muted); margin-bottom: 6px; }

.wdp-input-group {
    display: flex;
    align-items: center;
    border: 2px solid var(--wdp-border);
    border-radius: var(--wdp-radius);
    overflow: hidden;
    transition: border-color .15s;
    background: var(--wdp-surface);
}
.wdp-input-group:focus-within { border-color: var(--wdp-focus); box-shadow: 0 0 0 3px var(--wdp-focus-ring); }

.wdp-currency-symbol {
    padding: 0 12px;
    font-size: var(--wdp-font-size);
    font-weight: 600;
    color: var(--wdp-text-muted);
    background: rgba(0,0,0,.03);
    border-right: 1px solid var(--wdp-border);
    line-height: 42px;
    white-space: nowrap;
}

.wdp-input-group input[type="number"] {
    border: none;
    outline: none;
    padding: 10px 14px;
    font-size: var(--wdp-font-size);
    font-family: var(--wdp-font);
    color: var(--wdp-text);
    background: transparent;
    flex: 1;
    -moz-appearance: textfield;
}
.wdp-input-group input::-webkit-inner-spin-button { display: none; }

/* ── Anonymous toggle ────────────────────────────────────────────────────── */
.wdp-anon-wrap {
    background: rgba(0,0,0,.03);
    border: 1px solid var(--wdp-border);
    border-radius: var(--wdp-radius-lg);
    padding: 12px 14px;
    margin-bottom: var(--wdp-space);
}

.wdp-toggle-label   { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.wdp-toggle-switch  { position: relative; flex-shrink: 0; }
.wdp-toggle-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

.wdp-toggle-track {
    display: block;
    width: 40px; height: 22px;
    background: rgba(0,0,0,.2);
    border-radius: 11px;
    transition: background .2s;
    position: relative;
}
.wdp-toggle-thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.wdp-form-wrap .wdp-toggle-switch input:checked ~ .wdp-toggle-track                   { background: var(--wdp-primary); }
.wdp-toggle-switch input:checked ~ .wdp-toggle-track .wdp-toggle-thumb { transform: translateX(18px); }
.wdp-form-wrap .wdp-toggle-switch input:focus-visible ~ .wdp-toggle-track              { outline: 2px solid var(--wdp-focus); outline-offset: 2px; }

.wdp-toggle-text       { font-size: .9em; font-weight: 500; color: var(--wdp-text); }
.wdp-toggle-text small { display: block; font-size: .78em; font-weight: 400; color: var(--wdp-text-muted); margin-top: 1px; }

.wdp-anon-notice {
    display: flex; align-items: flex-start; gap: 8px;
    background: #fff8e6; border: 1px solid #ffd970;
    border-radius: var(--wdp-radius);
    padding: 10px 12px; font-size: .85em;
    color: #7a5c00; margin-bottom: var(--wdp-space);
}
.wdp-anon-notice svg { flex-shrink: 0; margin-top: 1px; }

/* ── Form fields ─────────────────────────────────────────────────────────── */
.wdp-field { margin-bottom: var(--wdp-space); }
.wdp-field label {
    display: flex; align-items: center; gap: 6px;
    font-size: .875em; color: var(--wdp-text); font-weight: 500; margin-bottom: 5px;
}
.wdp-required  { color: var(--wdp-error); font-weight: 700; }
.wdp-optional  { color: var(--wdp-text-muted); font-weight: 400; font-size: .8em; }
.wdp-field-hint{ color: var(--wdp-text-muted); font-size: .78em; font-weight: 400; }

.wdp-form-wrap .wdp-field input[type="text"],
.wdp-form-wrap .wdp-field input[type="email"],
.wdp-form-wrap .wdp-field textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 2px solid var(--wdp-border) !important;
    border-radius: var(--wdp-radius) !important;
    font-size: var(--wdp-font-size) !important;
    font-family: var(--wdp-font) !important;
    color: var(--wdp-text) !important;
    background: var(--wdp-surface) !important;
    box-sizing: border-box !important;
    transition: border-color .15s, box-shadow .15s !important;
    resize: vertical;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
}
.wdp-form-wrap .wdp-field input[type="text"]:focus,
.wdp-form-wrap .wdp-field input[type="email"]:focus,
.wdp-form-wrap .wdp-field textarea:focus {
    border-color: var(--wdp-focus) !important;
    box-shadow: 0 0 0 3px var(--wdp-focus-ring) !important;
    outline: none !important;
}

/* ── Dedication ──────────────────────────────────────────────────────────── */
.wdp-dedication-wrap   { margin-bottom: var(--wdp-space); }
.wdp-form-wrap .wdp-dedication-toggle {
    display: flex; align-items: center; gap: 7px;
    background: none; border: none; padding: 0;
    font-size: .875em; font-weight: 500; font-family: var(--wdp-font);
    color: var(--wdp-primary); cursor: pointer; transition: color .15s;
}
.wdp-form-wrap .wdp-dedication-toggle:hover { color: var(--wdp-primary-hover); }
.wdp-dedication-chevron { font-size: .7em; }

.wdp-dedication-fields {
    margin-top: 12px; padding: 14px;
    background: rgba(0,0,0,.02);
    border: 1px solid var(--wdp-border);
    border-radius: var(--wdp-radius-lg);
}

.wdp-dedication-type { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }

.wdp-form-wrap .wdp-radio-label {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: .875em;
    padding: 6px 12px;
    border: 1.5px solid var(--wdp-border);
    border-radius: 20px;
    color: var(--wdp-text);
    transition: border-color .15s, background .15s;
}
.wdp-form-wrap .wdp-radio-label:has(input:checked) {
    border-color: var(--wdp-primary);
    background: var(--wdp-primary-light);
    color: var(--wdp-primary);
}
.wdp-radio-label input[type="radio"] { display: none; }

/* ── GDPR ────────────────────────────────────────────────────────────────── */
.wdp-gdpr-wrap {
    margin: .75rem 0 1.25rem;
    padding: 14px;
    background: rgba(0,0,0,.02);
    border-radius: var(--wdp-radius);
    border: 1px solid var(--wdp-border);
    /* Explicitly neutral — never tinted with brand primary */
}
.wdp-gdpr-label {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .82em; line-height: 1.5;
    color: var(--wdp-text-muted); cursor: pointer;
}
.wdp-gdpr-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.wdp-gdpr-label a { color: var(--wdp-primary); }

/* ── Unified option rows (fee recovery, wall opt-in, GDPR) ─────────────── */
.wdp-option-row {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       11px 14px;
    background:    var(--wdp-primary-ultralight);
    border:        1px solid color-mix(in srgb, var(--wdp-primary) 18%, transparent);
    border-radius: var(--wdp-radius);
    margin-bottom: var(--wdp-space);
    cursor:        pointer;
    transition:    background .15s, border-color .15s;
}
.wdp-option-row:has(input:checked) {
    background:   var(--wdp-primary-light);
    border-color: color-mix(in srgb, var(--wdp-primary) 35%, transparent);
}
.wdp-option-row input[type="checkbox"] {
    margin-top:   3px;
    flex-shrink:  0;
    accent-color: var(--wdp-primary);
    width:        15px;
    height:       15px;
    cursor:       pointer;
}
.wdp-option-row-text {
    flex:        1;
    font-size:   .85em;
    line-height: 1.5;
    color:       var(--wdp-text);
    font-weight: 500;
}
.wdp-option-row-hint {
    display:     block;
    font-size:   .78em;
    font-weight: 400;
    color:       var(--wdp-text-muted);
    margin-top:  2px;
}

/* ── Payment method tabs ─────────────────────────────────────────────────── */
.wdp-methods { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.25rem; }
.wdp-form-wrap .wdp-method-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border: 2px solid var(--wdp-border);
    border-radius: var(--wdp-radius);
    background: var(--wdp-surface);
    font-size: .875em; font-family: var(--wdp-font); color: var(--wdp-text);
    cursor: pointer; transition: border-color .15s; white-space: nowrap;
}
.wdp-form-wrap .wdp-method-btn.active { border-color: var(--wdp-primary); }

/* ── Stripe Payment Element wrapper ─────────────────────────────────────── */
#wdp-payment-element-wrap {
    border: 1px solid var(--wdp-border);
    border-radius: var(--wdp-radius);
    padding: 16px;
    margin-bottom: var(--wdp-space);
    background: rgba(0,0,0,.015);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.wdp-form-wrap .wdp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 13px;
    border: none; border-radius: var(--wdp-radius);
    font-size: var(--wdp-font-size); font-family: var(--wdp-font); font-weight: 600;
    cursor: pointer; text-align: center; text-decoration: none;
    transition: background .15s, opacity .15s;
    box-sizing: border-box; line-height: 1.3;
    text-transform: none;   /* prevent theme uppercase bleed */
    letter-spacing: .02em;  /* subtle, controlled spacing */
}
.wdp-form-wrap .wdp-btn-primary             { background: var(--wdp-primary) !important; color: #fff !important; border: none !important; }
.wdp-form-wrap .wdp-btn-primary:hover       { background: var(--wdp-primary-hover) !important; color: #fff !important; }
.wdp-form-wrap .wdp-btn-primary:disabled    { opacity: .5; cursor: not-allowed; }
.wdp-form-wrap .wdp-btn-secondary           { background: rgba(0,0,0,.06); color: var(--wdp-text); }
.wdp-form-wrap .wdp-btn-secondary:hover     { background: rgba(0,0,0,.1); }
.wdp-form-wrap .wdp-btn-ghost               { background: transparent; color: var(--wdp-text-muted); border: 1.5px solid var(--wdp-border); }
.wdp-form-wrap .wdp-btn-ghost:hover         { color: var(--wdp-text); border-color: rgba(0,0,0,.3); }
.wdp-form-wrap .wdp-btn-payconiq            { background: var(--wdp-payconiq) !important; color: #fff !important; }
.wdp-form-wrap .wdp-btn-payconiq:hover      { background: var(--wdp-payconiq-hover) !important; }
.wdp-form-wrap .wdp-btn-sm                  { padding: 9px 14px; font-size: .875em; }

.wdp-form-wrap .wdp-back {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    transparent;
    border:        1.5px solid var(--wdp-border);
    border-radius: var(--wdp-radius);
    color:         var(--wdp-text-muted);
    cursor:        pointer;
    font-size:     .8em;
    font-family:   var(--wdp-font);
    font-weight:   500;
    padding:       6px 14px;
    margin-bottom: var(--wdp-space);
    transition:    border-color .15s, color .15s;
}
.wdp-form-wrap .wdp-back:hover {
    border-color: var(--wdp-primary);
    color:        var(--wdp-primary);
}
.wdp-form-wrap .wdp-back:focus-visible {
    outline:        2px solid var(--wdp-focus);
    outline-offset: 2px;
}

/* ── Error / secure notice ───────────────────────────────────────────────── */
.wdp-error {
    background: rgba(192,57,43,.06); border: 1px solid rgba(192,57,43,.25); color: var(--wdp-error);
    padding: 10px 14px; border-radius: var(--wdp-radius);
    font-size: .875em; margin-bottom: var(--wdp-space);
}
.wdp-secure {
    font-size: .78em; color: var(--wdp-text-muted);
    text-align: center; margin: .75rem 0 0;
}

/* ── Payconiq payment step ───────────────────────────────────────────────── */
.wdp-payconiq-brand {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; font-size: 1.1em; font-weight: 700; margin-bottom: .5rem;
    color: var(--wdp-text);
}
.wdp-payconiq-amount {
    text-align: center; font-size: 2em; font-weight: 700;
    color: var(--wdp-payconiq); margin: .25rem 0 1.25rem;
}
.wdp-payconiq-app-btn { margin-bottom: var(--wdp-space); font-size: var(--wdp-font-size); }
.wdp-payconiq-desktop-link {
    margin-bottom: var(--wdp-space);
    background: transparent;
    color: var(--wdp-payconiq);
    border: 1.5px solid var(--wdp-payconiq);
    font-size: .875em;
}
.wdp-payconiq-desktop-link:hover { background: rgba(255,71,133,.06); }

.wdp-payconiq-qr-wrap      { text-align: center; margin-bottom: var(--wdp-space); }
.wdp-payconiq-instructions { font-size: .875em; color: var(--wdp-text-muted); margin: 0 0 .75rem; }
#wdp-payconiq-qr {
    max-width: 200px; width: 100%;
    border: 1px solid var(--wdp-border); border-radius: var(--wdp-radius-lg);
    padding: 8px; display: block; margin: 0 auto;
}

.wdp-payconiq-status-wrap { margin: var(--wdp-space) 0; }
.wdp-payconiq-status {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; font-size: .875em; color: var(--wdp-text-muted);
}
.wdp-payconiq-timer {
    text-align: center; font-size: .8em; color: var(--wdp-text-muted);
    font-variant-numeric: tabular-nums; margin-top: 4px;
}
.wdp-payconiq-actions { display: flex; flex-direction: column; gap: 8px; margin-top: var(--wdp-space); }
.wdp-note { font-size: .82em; color: var(--wdp-text-muted); margin-top: var(--wdp-space); line-height: 1.5; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.wdp-spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,.12);
    border-top-color: var(--wdp-primary);
    border-radius: 50%;
    animation: wdp-spin .8s linear infinite; flex-shrink: 0;
}
@keyframes wdp-spin { to { transform: rotate(360deg); } }

/* ── Success screen ──────────────────────────────────────────────────────── */
.wdp-success          { text-align: center; padding: 2rem 1rem; }
.wdp-checkmark        {
    margin-bottom: var(--wdp-space);
    display:       flex;
    justify-content: center;
}
.wdp-check-svg        { width: 64px; height: 64px; }
.wdp-check-circle {
    fill:              none;
    stroke:            #27ae60;
    stroke-width:      3;
    stroke-dasharray:  166;
    stroke-dashoffset: 166;
    animation:         wdp-circle-in .5s cubic-bezier(.65,0,.45,1) forwards;
}
.wdp-check-tick {
    fill:              none;
    stroke:            #27ae60;
    stroke-width:      3;
    stroke-linecap:    round;
    stroke-linejoin:   round;
    stroke-dasharray:  48;
    stroke-dashoffset: 48;
    animation:         wdp-tick-in .3s .5s cubic-bezier(.65,0,.45,1) forwards;
}
@keyframes wdp-circle-in { to { stroke-dashoffset: 0; } }
@keyframes wdp-tick-in   { to { stroke-dashoffset: 0; } }
.wdp-dedication-confirm {
    margin-top: .75rem; font-style: italic;
    color: var(--wdp-text-muted); font-size: .875em;
    background: rgba(0,0,0,.03); border-radius: var(--wdp-radius);
    padding: 8px 14px;
}

/* ── Loading state ───────────────────────────────────────────────────────── */
.wdp-form-wrap.wdp-loading { opacity: .6; pointer-events: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wdp-methods        { flex-direction: column; }
    .wdp-method-btn     { width: 100%; }
    .wdp-dedication-type{ flex-direction: column; }
    .wdp-radio-label    { width: fit-content; }
}
body.wdp-is-mobile .wdp-payconiq-qr-wrap  { display: none !important; }
body.wdp-is-mobile .wdp-payconiq-app-btn  { font-size: 1.1em; padding: 16px; }

/* ── Elementor widget context ────────────────────────────────────────────── */
/*
 * When the shortcode is placed inside an Elementor widget, the container
 * may have padding/max-width already set. Remove the margin:0 auto on the
 * form and let Elementor handle alignment.
 */
.elementor-widget-shortcode .wdp-form-wrap {
    max-width: 100%;
    margin: 0;
}

/* Elementor dark background section: boost contrast on inputs */
.elementor-section.elementor-section-content-dark .wdp-form-wrap,
[data-settings*='"background_color":"#000"'] .wdp-form-wrap,
.e-con[style*="background-color: rgb(0"] .wdp-form-wrap {
    --wdp-surface: rgba(255,255,255,.05);
    --wdp-border:  rgba(255,255,255,.25);
    --wdp-text:    #ffffff;
    --wdp-text-muted: rgba(255,255,255,.65);
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.wdp-progress-wrap {
    margin-bottom: 1.75rem;
}

.wdp-progress-bar-track {
    height: 12px;
    background: rgba(0,0,0,.08);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.wdp-progress-bar-fill {
    height: 100%;
    background: var(--wdp-primary);
    border-radius: 6px;
    transition: width .6s ease;
    min-width: 2px;
}

.wdp-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .875em;
    color: var(--wdp-text);
}

.wdp-progress-raised strong {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--wdp-primary);
}

.wdp-progress-pct {
    font-size: .8em;
    color: var(--wdp-text-muted);
    font-weight: 600;
}

.wdp-progress-label {
    font-size: .82em;
    color: var(--wdp-text-muted);
    margin: 4px 0 0;
    font-style: italic;
}

/* ── Frequency toggle ─────────────────────────────────────────────────────── */
.wdp-frequency-wrap {
    display: flex;
    gap: 6px;
    margin-bottom: 1.25rem;
    background: rgba(0,0,0,.04);
    border-radius: var(--wdp-radius-lg);
    padding: 4px;
}

.wdp-form-wrap .wdp-freq-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: calc(var(--wdp-radius) - 2px);
    background: transparent;
    font-size: .875em;
    font-family: var(--wdp-font);
    font-weight: 500;
    color: var(--wdp-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
    text-transform: none;   /* prevent theme uppercase bleed */
    letter-spacing: normal;
}

.wdp-form-wrap .wdp-freq-btn.active {
    background: var(--wdp-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
}

.wdp-form-wrap .wdp-freq-btn:hover:not(.active) {
    color: var(--wdp-text);
}

@media (max-width: 360px) {
    .wdp-frequency-wrap { flex-direction: column; }
}

/* ── Form display title ───────────────────────────────────────────────────── */
.wdp-form-display-title {
    font-size: calc(var(--wdp-font-size) * 1.4);
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--wdp-text);
    font-family: var(--wdp-font-heading);
    line-height: 1.3;
}

/* ── Donor Portal ─────────────────────────────────────────────────────────── */
.wdp-portal-wrap {
    font-family: var(--wdp-font);
    font-size:   var(--wdp-font-size);
    color:       var(--wdp-text);
    max-width:   620px;
    margin:      0 auto;
}

.wdp-portal-card {
    background:    var(--wdp-surface);
    border:        1px solid var(--wdp-border);
    border-radius: var(--wdp-radius-lg);
    padding:       40px 36px;
    text-align:    center;
    box-shadow:    0 2px 12px rgba(0,0,0,.06);
}

.wdp-portal-icon {
    font-size:     2.5rem;
    color:         var(--wdp-primary);
    margin-bottom: .75rem;
}

.wdp-portal-title {
    font-family:   var(--wdp-font-heading, var(--wdp-font));
    font-size:     calc(var(--wdp-font-size) * 1.4);
    font-weight:   700;
    color:         var(--wdp-text);
    margin:        0 0 .75rem;
}

.wdp-portal-desc {
    font-size:  .9em;
    color:      var(--wdp-text-muted);
    margin:     0 0 1.5rem;
    line-height: 1.6;
}

.wdp-portal-input {
    width:         100%;
    padding:       11px 14px;
    border:        2px solid var(--wdp-border);
    border-radius: var(--wdp-radius);
    font-size:     var(--wdp-font-size);
    font-family:   var(--wdp-font);
    color:         var(--wdp-text);
    background:    var(--wdp-surface);
    box-sizing:    border-box;
    transition:    border-color .15s;
    text-align:    left;
}
.wdp-portal-input:focus { outline: none; border-color: var(--wdp-focus); box-shadow: 0 0 0 3px var(--wdp-focus-ring); }

.wdp-portal-sent-msg {
    background:    var(--wdp-primary-light);
    border:        1px solid var(--wdp-primary);
    border-radius: var(--wdp-radius);
    padding:       16px;
    font-size:     .9em;
    color:         var(--wdp-text);
    line-height:   1.6;
}

/* Dashboard header */
.wdp-portal-header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   1.25rem;
    gap:             12px;
}

/* Summary stats */
.wdp-portal-summary {
    display:       flex;
    flex-wrap:     wrap;
    gap:           12px;
    margin-bottom: 1.5rem;
}

.wdp-portal-stat {
    background:    var(--wdp-primary-light);
    border:        1px solid var(--wdp-border);
    border-radius: var(--wdp-radius);
    padding:       14px 20px;
    min-width:     120px;
    flex:          1;
}
.wdp-portal-stat span   { display: block; font-size: .75em; color: var(--wdp-text-muted); margin-bottom: 4px; }
.wdp-portal-stat strong { display: block; font-size: 1.3em; font-weight: 700; color: var(--wdp-primary); }

/* Donation rows */
.wdp-portal-list {
    border:        1px solid var(--wdp-border);
    border-radius: var(--wdp-radius-lg);
    overflow:      hidden;
    background:    var(--wdp-surface);
}

.wdp-portal-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         14px 18px;
    gap:             12px;
    border-bottom:   1px solid var(--wdp-border);
    transition:      background .1s;
}
.wdp-portal-row:last-child   { border-bottom: none; }
.wdp-portal-row:hover        { background: rgba(0,0,0,.02); }

.wdp-portal-amount {
    font-size:   1.05em;
    font-weight: 700;
    color:       var(--wdp-text);
    display:     flex;
    align-items: center;
    gap:         8px;
}

.wdp-portal-meta {
    font-size:  .8em;
    color:      var(--wdp-text-muted);
    margin-top: 3px;
}

.wdp-portal-dedication {
    font-size:   .78em;
    color:       var(--wdp-primary);
    margin-top:  4px;
    font-style:  italic;
}

.wdp-portal-badge {
    background:    var(--wdp-primary-light);
    color:         var(--wdp-primary);
    font-size:     .7em;
    font-weight:   600;
    padding:       2px 8px;
    border-radius: 8px;
    font-style:    normal;
}

.wdp-portal-row-right { flex-shrink: 0; }

.wdp-portal-empty {
    text-align: center;
    padding:    40px 20px;
    color:      var(--wdp-text-muted);
    font-size:  .9em;
}

@media (max-width: 480px) {
    .wdp-portal-card  { padding: 28px 20px; }
    .wdp-portal-row   { flex-direction: column; align-items: flex-start; }
    .wdp-portal-row-right { width: 100%; }
    .wdp-portal-row-right .wdp-btn { width: 100%; text-align: center; }
}

/* ── Payment method selector v2 — card style ─────────────────────────────── */
.wdp-methods-label {
    font-size:    .8em;
    font-weight:  600;
    text-transform: none;
    letter-spacing: .01em;
    color:        var(--wdp-text-muted);
    margin-bottom: 8px;
}

.wdp-methods {
    display:       flex;
    flex-direction: column;
    gap:           8px;
    margin-bottom: 1.25rem;
}

.wdp-method-btn {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       14px 16px;
    border:        2px solid var(--wdp-border);
    border-radius: var(--wdp-radius-lg);
    background:    var(--wdp-surface);
    cursor:        pointer;
    text-align:    left;
    transition:    border-color .15s, background .15s, box-shadow .15s;
    width:         100%;
    box-sizing:    border-box;
    position:      relative;
}

.wdp-form-wrap .wdp-method-btn:hover {
    border-color:  var(--wdp-primary);
    background:    var(--wdp-primary-light);
}

.wdp-method-btn.active {
    border-color: var(--wdp-primary);
    background:   var(--wdp-primary-light);
    box-shadow:   inset 0 0 0 1px var(--wdp-primary);
}

.wdp-method-icon {
    display:       flex;
    gap:           4px;
    align-items:   center;
    flex-shrink:   0;
}

.wdp-method-text {
    flex:          1;
}

.wdp-method-text strong {
    display:       block;
    font-size:     .9em;
    font-weight:   600;
    color:         var(--wdp-text);
    font-family:   var(--wdp-font);
    line-height:   1.3;
    text-transform: none;
    letter-spacing: normal;
}

.wdp-method-text small {
    display:       block;
    font-size:     .75em;
    color:         var(--wdp-text-muted);
    margin-top:    2px;
    font-weight:   400;
}

.wdp-method-check {
    display:       none;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    var(--wdp-primary);
    color:         #fff;
    font-size:     .7em;
    line-height:   20px;
    text-align:    center;
    flex-shrink:   0;
}

.wdp-form-wrap .wdp-method-btn.active .wdp-method-check {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wdp-form-wrap .wdp-method-btn:focus-visible {
    outline:        2px solid var(--wdp-focus);
    outline-offset: 2px;
}
/* Payconiq button always pink — never inherits brand primary */
.wdp-form-wrap #wdp-btn-payconiq {
    background:   var(--wdp-payconiq) !important;
    border-color: var(--wdp-payconiq) !important;
}
.wdp-form-wrap #wdp-btn-payconiq .wdp-method-text strong,
.wdp-form-wrap #wdp-btn-payconiq .wdp-method-text small {
    color: #fff !important;
}
.wdp-form-wrap #wdp-btn-payconiq.active {
    background:   var(--wdp-payconiq-hover) !important;
    border-color: var(--wdp-payconiq-hover) !important;
    box-shadow:   inset 0 0 0 1px rgba(0,0,0,.2) !important;
}

/* ── Countdown timer ─────────────────────────────────────────────────────── */
.wdp-countdown-wrap {
    margin-bottom: 1.25rem;
}

.wdp-countdown-inner {
    display:       flex;
    align-items:   center;
    gap:           12px;
    flex-wrap:     wrap;
}

.wdp-cd-label {
    font-size:    .8em;
    color:        var(--wdp-text-muted);
    font-weight:  500;
    white-space:  nowrap;
}

.wdp-cd-units {
    display:      flex;
    align-items:  center;
    gap:          6px;
}

.wdp-cd-unit {
    display:      flex;
    flex-direction: column;
    align-items:  center;
    background:   var(--wdp-primary);
    color:        #fff;
    border-radius: var(--wdp-radius);
    padding:      6px 12px;
    min-width:    48px;
    text-align:   center;
}

.wdp-cd-unit strong {
    font-size:    1.2em;
    font-weight:  700;
    line-height:  1;
    font-variant-numeric: tabular-nums;
}

.wdp-cd-unit span {
    font-size:    .65em;
    opacity:      .85;
    margin-top:   2px;
}

.wdp-cd-sep {
    font-size:    1.1em;
    font-weight:  700;
    color:        var(--wdp-primary);
    margin-bottom: 8px;
}

.wdp-countdown-ended {
    font-size:     .875em;
    color:         var(--wdp-text-muted);
    padding:       10px 14px;
    background:    rgba(0,0,0,.04);
    border-radius: var(--wdp-radius);
    text-align:    center;
}

/* ── P2P fundraising — create form ──────────────────────────────────────── */
.wdp-p2p-create {
    text-align: left;
}

.wdp-p2p-create .wdp-portal-icon {
    text-align: center;
}

.wdp-p2p-create .wdp-portal-title {
    text-align: center;
}

.wdp-p2p-create .wdp-portal-desc {
    text-align: center;
}

.wdp-p2p-create .wdp-field label {
    text-align: left;
    display:    block;
}

.wdp-p2p-create .wdp-field input,
.wdp-p2p-create .wdp-field select,
.wdp-p2p-create .wdp-field textarea {
    width:      100%;
    box-sizing: border-box;
}

.wdp-p2p-create .wdp-field select {
    padding:       10px 12px;
    border:        2px solid var(--wdp-border);
    border-radius: var(--wdp-radius);
    font-size:     var(--wdp-font-size);
    font-family:   var(--wdp-font);
    color:         var(--wdp-text);
    background:    var(--wdp-surface);
    appearance:    none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    transition:    border-color .15s;
    cursor:        pointer;
}

.wdp-p2p-create .wdp-field select:focus {
    outline:      none;
    border-color: var(--wdp-border-focus);
}

.wdp-p2p-submit-wrap {
    margin-top: 1.5rem;
}

/* ── P2P fundraising — progress bar ─────────────────────────────────────── */
.wdp-p2p-progress {
    margin-bottom: 1.5rem;
}

.wdp-p2p-progress .wdp-progress-bar-track {
    height:        10px;
    border-radius: 5px;
}

.wdp-p2p-progress .wdp-progress-bar-fill {
    height:        10px;
    border-radius: 5px;
    transition:    width .6s ease;
}

.wdp-p2p-campaign-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    background:    var(--wdp-primary-light);
    color:         var(--wdp-primary);
    font-size:     .75em;
    font-weight:   600;
    padding:       3px 10px;
    border-radius: 10px;
    border:        1px solid rgba(0,0,0,.06);
}

/* ── P2P fundraising — leaderboard ──────────────────────────────────────── */
.wdp-p2p-leaderboard {
    margin: 1rem 0;
}

.wdp-p2p-leaderboard h3 {
    font-family: var(--wdp-font-heading, var(--wdp-font));
    font-size:   calc(var(--wdp-font-size) * 1.15);
    font-weight: 700;
    color:       var(--wdp-text);
    margin:      0 0 1rem;
    display:     flex;
    align-items: center;
    gap:         8px;
}

.wdp-p2p-leaderboard .wdp-portal-row {
    transition: background .12s;
}

.wdp-p2p-leaderboard .wdp-portal-row:hover {
    background: rgba(0,0,0,.02);
}

.wdp-p2p-rank-medal {
    width:       32px;
    height:      32px;
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   1.2em;
    flex-shrink: 0;
}

/* ── Single fundraiser page ─────────────────────────────────────────────── */
.wdp-fundraiser-hero {
    position:      relative;
    border-radius: var(--wdp-radius-lg);
    overflow:      hidden;
    max-height:    400px;
    margin-bottom: 1.5rem;
    background:    var(--wdp-primary-light);
}

.wdp-fundraiser-hero img {
    width:       100%;
    height:      400px;
    object-fit:  cover;
    display:     block;
}

.wdp-fundraiser-meta {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    margin-bottom: .75rem;
    font-size:   .875em;
    color:       var(--wdp-text-muted);
}

.wdp-fundraiser-title {
    font-family:   var(--wdp-font-heading, var(--wdp-font));
    font-size:     clamp(1.4rem, 4vw, 2rem);
    font-weight:   800;
    line-height:   1.2;
    color:         var(--wdp-text);
    margin:        0 0 1rem;
}

.wdp-fundraiser-story {
    font-size:   1rem;
    line-height: 1.75;
    color:       var(--wdp-text);
    margin-bottom: 2rem;
}

.wdp-fundraiser-story p {
    margin: 0 0 1rem;
}

.wdp-fundraiser-wrap {
    display:               grid;
    grid-template-columns: 1fr 380px;
    gap:                   40px;
    align-items:           start;
    max-width:             1100px;
    margin:                0 auto;
    padding:               0 20px;
}

.wdp-fundraiser-sidebar {
    position:   sticky;
    top:        24px;
}

.wdp-fundraiser-sidebar .wdp-form-wrap {
    max-width: 100%;
}

@media (max-width: 760px) {
    .wdp-fundraiser-wrap {
        grid-template-columns: 1fr;
        gap:                   24px;
        padding:               0 16px;
    }
    .wdp-fundraiser-sidebar {
        position: static;
    }
}

/* ── Donor Wall ─────────────────────────────────────────────────────────── */
.wdp-donor-wall {
    display:             grid;
    gap:                 10px;
    margin:              1rem 0;
}
.wdp-donor-wall-cols-1 { grid-template-columns: 1fr; }
.wdp-donor-wall-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wdp-donor-wall-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 600px) {
    .wdp-donor-wall-cols-2,
    .wdp-donor-wall-cols-3 { grid-template-columns: 1fr; }
}

.wdp-donor-card {
    display:        flex;
    align-items:    center;
    gap:            10px;
    background:     var(--wdp-surface, #fff);
    border:         1px solid var(--wdp-border, #e5e7eb);
    border-radius:  var(--wdp-radius, 8px);
    padding:        10px 14px;
    transition:     box-shadow .15s;
}
.wdp-donor-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
}
.wdp-donor-avatar {
    position:   relative;
    flex-shrink: 0;
}
.wdp-donor-avatar img {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
}
.wdp-donor-initial {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--wdp-primary, #5469d4);
    color:           #fff;
    font-size:       16px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.wdp-donor-info {
    flex: 1;
    min-width: 0;
}
.wdp-donor-name {
    display:       block;
    font-weight:   600;
    font-size:     .875em;
    color:         var(--wdp-text, #1d2327);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.wdp-donor-meta {
    display:   block;
    font-size: .75em;
    color:     var(--wdp-text-muted, #888);
    margin-top: 2px;
}
.wdp-donor-heart {
    color:     var(--wdp-primary, #5469d4);
    font-size: .9em;
    flex-shrink: 0;
    opacity:   .5;
}
.wdp-donor-wall-empty {
    text-align:  center;
    color:       var(--wdp-text-muted, #888);
    padding:     24px;
    font-size:   .875em;
    font-style:  italic;
}

/* ── Wall opt-in checkbox on donation form ───────────────────────────────── */
.wdp-wall-opt-in-wrap {
    padding:       11px 14px;
    background:    var(--wdp-primary-ultralight);
    border:        1px solid color-mix(in srgb, var(--wdp-primary) 18%, transparent);
    border-radius: var(--wdp-radius);
    margin-bottom: var(--wdp-space);
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    cursor:        pointer;
    transition:    background .15s;
}
.wdp-wall-opt-in-wrap:has(input:checked) {
    background:   var(--wdp-primary-light);
    border-color: color-mix(in srgb, var(--wdp-primary) 35%, transparent);
}
.wdp-wall-opt-in-wrap label { display: contents; }
.wdp-wall-opt-in-wrap input[type="checkbox"] {
    margin-top:   3px;
    flex-shrink:  0;
    accent-color: var(--wdp-primary);
    width:        15px;
    height:       15px;
    cursor:       pointer;
}
.wdp-wall-opt-in-wrap .wdp-opt-text {
    flex:        1;
    font-size:   .85em;
    font-weight: 500;
    line-height: 1.5;
    color:       var(--wdp-text);
}

/* ── Campaign landing page ───────────────────────────────────────────────── */
.wdp-campaign-hero {
    position:   relative;
    min-height: 360px;
    display:    flex;
    align-items: flex-end;
    overflow:   hidden;
    background: var(--wdp-primary, #5469d4);
}
.wdp-campaign-hero-img {
    position: absolute;
    inset:    0;
}
.wdp-campaign-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 100%);
}
.wdp-campaign-hero-content {
    position:   relative;
    z-index:    2;
    max-width:  1100px;
    margin:     0 auto;
    padding:    48px 24px 36px;
    width:      100%;
}
.wdp-campaign-title {
    font-size:   clamp(1.6rem, 5vw, 2.8rem);
    font-weight: 800;
    color:       #fff;
    margin:      0 0 10px;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.wdp-campaign-subtitle {
    font-size:   1.05rem;
    color:       rgba(255,255,255,.88);
    margin:      0 0 20px;
    max-width:   580px;
}
.wdp-campaign-hero-progress {
    max-width:    460px;
    background:   rgba(0,0,0,.25);
    border-radius: 10px;
    padding:      14px 18px;
    backdrop-filter: blur(4px);
}
.wdp-campaign-progress-bar {
    background:    rgba(255,255,255,.25);
    border-radius: 6px;
    height:        10px;
    margin-bottom: 8px;
}
.wdp-campaign-progress-fill {
    background:    #fff;
    height:        10px;
    border-radius: 6px;
    transition:    width .6s ease;
}
.wdp-campaign-progress-stats {
    display:   flex;
    gap:       14px;
    font-size: .85em;
    color:     rgba(255,255,255,.9);
    flex-wrap: wrap;
}
.wdp-campaign-wrap {
    display:               grid;
    grid-template-columns: 1fr 380px;
    gap:                   40px;
    max-width:             1100px;
    margin:                40px auto;
    padding:               0 24px 60px;
    align-items:           start;
}
.wdp-campaign-sidebar {
    position: sticky;
    top:      24px;
}
.wdp-campaign-form-card {
    background:    var(--wdp-surface, #fff);
    border:        1px solid var(--wdp-border, #e5e7eb);
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 4px 20px rgba(0,0,0,.08);
}
.wdp-campaign-form-card .wdp-form-wrap {
    max-width: 100%;
    border:    none;
    box-shadow: none;
    border-radius: 0;
}
.wdp-campaign-content {
    font-size:   1rem;
    line-height: 1.75;
    color:       var(--wdp-text, #1d2327);
}
.wdp-campaign-section {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--wdp-border, #e5e7eb);
}
.wdp-campaign-section-title {
    font-size:   1.2rem;
    font-weight: 700;
    margin:      0 0 18px;
    color:       var(--wdp-text, #1d2327);
}
.wdp-share-buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}
.wdp-share-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       9px 16px;
    border-radius: 6px;
    font-size:     .875em;
    font-weight:   600;
    color:         #fff;
    text-decoration: none;
    border:        none;
    cursor:        pointer;
    transition:    opacity .15s;
}
.wdp-share-btn:hover { opacity: .85; }

@media (max-width: 760px) {
    .wdp-campaign-wrap {
        grid-template-columns: 1fr;
        padding:               0 16px 40px;
        gap:                   24px;
    }
    .wdp-campaign-sidebar { position: static; }
    .wdp-campaign-hero    { min-height: 260px; }
}

/* ── Fee recovery checkbox ──────────────────────────────────────────────── */
.wdp-fee-recovery-wrap {
    padding:       11px 14px;
    background:    #fffbeb;
    border:        1px solid #fde68a;
    border-radius: var(--wdp-radius);
    margin-bottom: var(--wdp-space);
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    cursor:        pointer;
    transition:    background .15s;
}
.wdp-fee-recovery-wrap:has(input:checked) {
    background:   #fef3c7;
    border-color: #fbbf24;
}
.wdp-fee-recovery-wrap label {
    display:     contents;
}
.wdp-fee-recovery-wrap input[type="checkbox"] {
    margin-top:   3px;
    flex-shrink:  0;
    accent-color: #d97706;
    width:        15px;
    height:       15px;
    cursor:       pointer;
}
.wdp-fee-label-text {
    flex:        1;
    font-size:   .85em;
    font-weight: 500;
    line-height: 1.5;
    color:       var(--wdp-text);
}

/* ── Express Checkout (Apple Pay / Google Pay) ───────────────────────────── */
.wdp-express-checkout-wrap {
    padding: 16px 0 4px;
}
#wdp-express-checkout-element {
    min-height: 48px;
}
.wdp-express-or {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      14px 0 6px;
    color:       var(--wdp-text-muted, #888);
    font-size:   .8em;
}
.wdp-express-or::before,
.wdp-express-or::after {
    content:     '';
    flex:        1;
    height:      1px;
    background:  var(--wdp-border, #e5e7eb);
}

/* Hide express step when no wallet available */
.wdp-form-wrap:not(.wdp-has-express) #wdp-step-express {
    display: none !important;
}

/* ── Impact statements on amount buttons ────────────────────────────────── */
.wdp-form-wrap .wdp-amounts-with-impact .wdp-amount-btn {
    flex-direction: column;
    height:         auto;
    padding:        10px 8px;
    gap:            3px;
    min-height:     60px;
}
.wdp-amount-number {
    font-size:   1.05em;
    font-weight: 700;
    line-height: 1;
}
.wdp-amount-impact {
    font-size:   .7em;
    font-weight: 400;
    color:        inherit;
    opacity:      .75;
    line-height:  1.2;
    text-align:   center;
    white-space:  normal;
    word-break:   break-word;
}

/* Impact statement display strip */
.wdp-impact-statement {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       10px 14px;
    background:    linear-gradient(135deg, var(--wdp-primary-light,#eef2ff) 0%, #fff 100%);
    border:        1px solid color-mix(in srgb, var(--wdp-primary) 18%, transparent);
    border-radius: var(--wdp-radius, 8px);
    margin:        10px 0 var(--wdp-space, 16px);
    font-size:     .875em;
    color:         var(--wdp-text, #1d2327);
    font-weight:   500;
    animation:     wdp-fade-in .2s ease;
}
.wdp-impact-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}

@keyframes wdp-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Tribute notification field ─────────────────────────────────────────── */
.wdp-tribute-notify-wrap {
    background:    var(--wdp-primary-ultralight);
    border:        1px solid color-mix(in srgb, var(--wdp-primary) 20%, transparent);
    border-radius: var(--wdp-radius);
    padding:       12px 14px;
}
.wdp-tribute-notify-wrap label {
    font-weight: 600;
    color:       var(--wdp-text, #1d2327);
    font-size:   .875em;
}
.wdp-tribute-notify-wrap .wdp-field-hint {
    font-size:   .75em;
    color:       var(--wdp-primary);
    margin-top:  4px;
}

/* ── Manual colour override (added via Settings → form colour override) ────
   If --wdp-override-primary is set on the form wrap (injected by PHP),
   it takes precedence over everything else for primary actions.          */
.wdp-form-wrap[style*="--wdp-override-primary"] {
    --wdp-primary:       var(--wdp-override-primary);
    --wdp-primary-hover: var(--wdp-override-hover, var(--wdp-override-primary));
    --wdp-primary-light: var(--wdp-override-light, rgba(84,105,212,.08));
}

/* ── Safe neutral styles for non-action elements ─────────────────────────
   These never use --wdp-primary so they stay readable on any brand colour */
.wdp-field input[type="text"]::placeholder,
.wdp-field input[type="email"]::placeholder,
.wdp-field textarea::placeholder {
    color: var(--wdp-text-muted);
    opacity: .6;
}

/* Spinner always uses focus blue (not brand orange) */
.wdp-spinner { border-top-color: var(--wdp-focus); }

/* Countdown units: use primary intentionally (brand identity in urgency widget) */
/* But text inside must be white for readability on any primary colour */
.wdp-cd-unit { color: #fff; }

/* ── GDPR / consent checkboxes — force native, clickable rendering ──────── */
/* The 100%-width input rule must never apply to checkboxes, and theme
   appearance:none resets must not make them invisible. */
.wdp-p2p-create .wdp-field input[type="checkbox"],
.wdp-form-wrap  input[type="checkbox"]#wdp-gdpr,
.wdp-checkbox-label input[type="checkbox"] {
    width:        18px !important;
    height:       18px !important;
    min-width:    18px;
    margin:       2px 0 0;
    padding:      0;
    appearance:         auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance:    checkbox !important;
    accent-color: var(--wdp-primary, #27ae60);
    cursor:       pointer;
    flex-shrink:  0;
    position:     static !important;
    opacity:      1 !important;
    pointer-events: auto !important;
}

.wdp-checkbox-label,
.wdp-gdpr-field .wdp-checkbox-label {
    display:     flex !important;
    align-items: flex-start;
    gap:         10px;
    cursor:      pointer;
    text-align:  left;
}

.wdp-checkbox-label span {
    flex: 1;
    font-size: .875em;
    line-height: 1.5;
}

/* Links inside consent text open normally without blocking the checkbox */
.wdp-checkbox-label span a { pointer-events: auto; }