/* ========================================================================
   Pride Donations — frontend wizard form
   ======================================================================== */

/* ============= Shell — wraps optional side panel + form-card ============= */
.pdon-shell {
    max-width: 960px;
    margin: 32px auto;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pdon-form-card {
    flex: 1 1 0;
    background: #fff;
    overflow: hidden;
    position: relative;
    color: #1f0a29;
    min-width: 0; /* prevent flex children from overflowing */
}
.pdon-form-card::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg,
        #e40303 0%, #ff8c00 16.6%, #ffed00 33.3%, #008026 50%,
        #24408e 66.6%, #732982 83.3%, #e40303 100%);
}

/* On desktop, the side panel carries the brand chrome — hide the
   form-card's own header + rainbow stripe so they aren't doubled.
   !important defeats any theme rules with higher specificity. */
@media (min-width: 900px) {
    .pdon-form-card__header { display: none !important; }
    .pdon-form-card::before { display: none !important; }
}

/* Below the breakpoint, collapse to single-column (form-card only). */
@media (max-width: 899px) {
    .pdon-shell {
        display: block !important;
        max-width: 560px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
        border-radius: 14px;
    }
    .pdon-sidepanel { display: none !important; }
}
/* ============= Side panel (desktop-only "why donate" rail) ============= */
.pdon-sidepanel {
    flex: 0 0 380px;
    position: relative;
    color: #fff;
    background:
        radial-gradient(ellipse at 15% 10%, rgba(228, 3, 3, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 90%, rgba(255, 140, 0, 0.20) 0%, transparent 60%),
        linear-gradient(160deg, #2b0d38 0%, #4a1660 50%, #732982 100%);
    padding: 36px 32px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pdon-sidepanel::before {
    /* faint star sparkle texture, same as form header */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.30), transparent 50%),
        radial-gradient(1.5px 1.5px at 88% 22%, rgba(255,255,255,0.22), transparent 50%),
        radial-gradient(1px 1px at 38% 70%, rgba(255,255,255,0.18), transparent 50%),
        radial-gradient(1.5px 1.5px at 78% 55%, rgba(255,255,255,0.22), transparent 50%),
        radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,0.15), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.pdon-sidepanel__content {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
}

.pdon-sidepanel__pictograph {
    width: 80px;
    height: 64px;
    margin-bottom: 18px;
    background-image: url('https://pridecorpuschristi.com/wp-content/uploads/2024/05/PRIDECC_Horiz_Logo_White_BBird.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

.pdon-sidepanel__heading {
    font-size: 24px;
    font-weight: 800;
    color: #fff !important;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.pdon-sidepanel__tagline {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.pdon-sidepanel__divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    margin: 22px 0 18px;
}

.pdon-sidepanel__subhead {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 800;
    margin: 0 0 12px;
}

/* The theme's default `ul li` styles (often vertical flex or constrained
   width on the li) were forcing each word onto its own line. Stronger
   selectors + !important on the layout-critical properties defeat those. */
.pdon-shell .pdon-sidepanel ul.pdon-sidepanel__list,
.pdon-shell .pdon-sidepanel .pdon-sidepanel__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    flex-direction: row !important;            /* defeat theme flex-column */
    justify-content: flex-start !important;    /* defeat space-between */
    align-items: flex-start !important;
    gap: 0 !important;
}
.pdon-shell .pdon-sidepanel ul.pdon-sidepanel__list li,
.pdon-shell .pdon-sidepanel .pdon-sidepanel__list li {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    float: none !important;
    clear: none !important;
    border: 0 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 0 30px !important;
    position: relative !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    list-style: none !important;
    background: transparent !important;
    text-indent: 0 !important;
}
.pdon-sidepanel ul.pdon-sidepanel__list li:last-child,
.pdon-sidepanel .pdon-sidepanel__list li:last-child {
    margin-bottom: 0 !important;
}
.pdon-sidepanel ul.pdon-sidepanel__list li::before,
.pdon-sidepanel .pdon-sidepanel__list li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    width: 20px !important;
    height: 20px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Some themes inject a ::after on list items (e.g. a divider line) — kill it. */
.pdon-sidepanel ul.pdon-sidepanel__list li::after,
.pdon-sidepanel .pdon-sidepanel__list li::after {
    content: none !important;
    display: none !important;
}

.pdon-sidepanel__closing {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* === Nuclear layout reset for the side-panel content ===
   The Verno theme has rules on generic <ul>/<li>/<h3>/<p> that were
   forcing flex layouts + spacing that overlapped our content. These
   explicit !important rules force normal block flow inside the side panel. */
.pdon-shell .pdon-sidepanel__content {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 auto !important;
}
.pdon-shell .pdon-sidepanel__content > * {
    position: relative !important;
    transform: none !important;
}
.pdon-shell .pdon-sidepanel__subhead,
.pdon-shell .pdon-sidepanel__heading,
.pdon-shell .pdon-sidepanel__tagline,
.pdon-shell .pdon-sidepanel__closing {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
}
.pdon-shell .pdon-sidepanel__divider {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    flex: none !important;
}

/* Optional decorative photo at the bottom */
.pdon-sidepanel__image {
    position: relative;
    z-index: 1;
    height: 140px;
    margin: 24px -32px -40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Fade out at top so it blends with the gradient panel above */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
}

/* ============= Header panel (above the wizard) ============= */
.pdon-form-card__header {
    padding: 30px 28px 26px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(228, 3, 3, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(115, 41, 130, 0.45) 0%, transparent 60%),
        linear-gradient(135deg, #2b0d38 0%, #4a1660 55%, #5f1a7a 100%);
    position: relative;
    overflow: hidden;
}
.pdon-form-card__header::after {
    /* faint star-sparkle texture */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,0.25), transparent 50%),
        radial-gradient(1.5px 1.5px at 78% 30%, rgba(255,255,255,0.18), transparent 50%),
        radial-gradient(1px 1px at 45% 78%, rgba(255,255,255,0.15), transparent 50%),
        radial-gradient(1.5px 1.5px at 88% 75%, rgba(255,255,255,0.2), transparent 50%);
    pointer-events: none;
}
.pdon-form-card__pictograph {
    /* 1.25:1 ratio — cropped so the wordmark falls off the right edge.
       Same crop as the promo cards. Bumping wider would let "PRIDE" letters
       leak through; bumping narrower would clip the rightmost star/wing. */
    width: 80px;
    height: 64px;
    margin: 0 auto 14px;
    background-image: url('https://pridecorpuschristi.com/wp-content/uploads/2024/05/PRIDECC_Horiz_Logo_White_BBird.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
    position: relative;
    z-index: 1;
}
/* Color rules need !important to defeat the theme's default heading/paragraph
   colors (e.g. `.entry-content p { color: #333 }`) that win on specificity. */
.pdon-form-card__heading {
    margin: 0 0 8px;
    color: #fff !important;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}
.pdon-form-card__tagline {
    margin: 0 auto;
    max-width: 420px;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ============= Wizard chrome ============= */

.pdon-wizard {
    padding-bottom: 12px;
}

/* Progress dots */
.pdon-wizard__progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 16px 28px 4px;
    padding: 0;
}
.pdon-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    color: #d1d5db;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    transition: color 0.25s ease;
    position: relative;
}
.pdon-step::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 60%;
    right: -40%;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
}
.pdon-step:last-child::after { display: none; }
.pdon-step__num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e5e7eb;
    color: #d1d5db;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    margin-bottom: 4px;
    z-index: 1;
    transition: all 0.25s ease;
}
.pdon-step__label { color: #9ca3af; }
.pdon-step.is-active .pdon-step__num {
    background: #732982; border-color: #732982; color: #fff;
    box-shadow: 0 0 0 4px rgba(115, 41, 130, 0.15);
}
.pdon-step.is-active .pdon-step__label { color: #732982; }
.pdon-step.is-done .pdon-step__num {
    background: #732982; border-color: #732982; color: #fff;
}
.pdon-step.is-done::after { background: #732982; }
.pdon-step.is-done .pdon-step__label { color: #732982; }

/* Viewport — clipping container with animated height */
.pdon-wizard__viewport {
    position: relative;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    margin-top: 8px;
}

/* Panels — stacked absolutely, slide in/out */
.pdon-panel {
    position: absolute;
    top: 0; left: 0; right: 0;
    box-sizing: border-box;
    padding: 12px 28px 20px;
    transform: translateX(40px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.3s ease;
    will-change: transform, opacity;
}
.pdon-panel.is-active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    position: relative; /* drives viewport height naturally for the first mount */
}
.pdon-panel.is-prev {
    transform: translateX(-40px);
    opacity: 0;
    pointer-events: none;
}
.pdon-panel.is-next {
    transform: translateX(40px);
    opacity: 0;
    pointer-events: none;
}

.pdon-panel__body { }
.pdon-panel__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 12px;
}

/* ============= Form fields ============= */

.pdon-field-group { margin: 4px 0 20px; }
.pdon-field-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Pill rows (amount + interval) */
.pdon-amount-pills, .pdon-interval-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pdon-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
}
.pdon-pill:hover {
    border-color: #732982;
    color: #732982;
    /* No transform here — caused perceived layout jitter when hovering. */
}
.pdon-pill.is-active {
    background: #732982;
    border-color: #732982;
    color: #fff;
    box-shadow: 0 4px 10px rgba(115, 41, 130, 0.25);
}

/* Custom amount input — single clean field, no double-border, no spinner arrows */
.pdon-custom-amount {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}
.pdon-custom-amount__wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 4px 18px;
    background: #fff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    max-width: 260px;
    width: 100%;
}
.pdon-custom-amount__wrap:focus-within {
    border-color: #732982;
    box-shadow: 0 0 0 4px rgba(115, 41, 130, 0.12);
}
.pdon-custom-amount__sign {
    color: #9ca3af;
    font-weight: 700;
    font-size: 18px;
    margin-right: 8px;
}
/* Higher specificity (.pdon-form-card prefix) to defeat any theme input styles. */
.pdon-form-card .pdon-custom-amount__input {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 12px 0;
    width: 100%;
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    color: #1f0a29;
    outline: none;
    text-align: left;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
.pdon-form-card .pdon-custom-amount__input::-webkit-outer-spin-button,
.pdon-form-card .pdon-custom-amount__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pdon-form-card .pdon-custom-amount__input::placeholder {
    color: #9ca3af;
    font-weight: 500;
    font-size: 16px;
}

/* Text / textarea fields */
.pdon-field {
    display: block;
    margin: 12px 0;
}
.pdon-field > span:not(.pdon-field-hint) {
    display: block;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 6px;
    font-weight: 500;
}
.pdon-field input[type="text"],
.pdon-field input[type="email"],
.pdon-field select,
.pdon-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font: inherit;
    font-size: 15px;
    box-sizing: border-box;
    background: #fff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pdon-field input:focus,
.pdon-field select:focus,
.pdon-field textarea:focus {
    border-color: #732982;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(115, 41, 130, 0.12);
}
.pdon-field-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #9ca3af;
}

/* === Floating-label fields (used for Name / Email / Dedication Name) === */
.pdon-float-field {
    position: relative;
    margin: 14px 0;
}
.pdon-form-card .pdon-float-field input {
    width: 100%;
    height: 58px;
    padding: 22px 16px 8px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: #1f0a29;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    box-sizing: border-box;
}
.pdon-form-card .pdon-float-field input:hover {
    border-color: #c5b0cf;
}
.pdon-form-card .pdon-float-field input:focus {
    border-color: #732982;
    box-shadow: 0 0 0 3px rgba(115, 41, 130, 0.12);
}
.pdon-float-field label {
    position: absolute;
    left: 16px;
    top: 50%;
    color: #9ca3af;
    font-size: 16px;
    font-weight: 500;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    background: #fff;
    padding: 0 5px;
    margin-left: -5px;
    line-height: 1.2;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Float up when the input has content OR is focused. The space placeholder
   (placeholder=" ") makes :not(:placeholder-shown) true when there's a value. */
.pdon-float-field input:focus + label,
.pdon-float-field input:not(:placeholder-shown) + label {
    transform: translateY(-30px) scale(0.78);
    color: #732982;
}
.pdon-float-field input:not(:focus):not(:placeholder-shown) + label {
    color: #6b7280;
}

/* Standalone hint paragraph below a float-field */
.pdon-hint {
    margin: -8px 4px 16px;
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.5;
}

/* === Leading icons on float-fields ===
   Implemented via CSS mask so the icon color can change with state
   (grey when blurred, brand-purple when focused). The SVG mask is inline
   data: so no external asset is required. */
.pdon-float-field--icon {
    position: relative;
}
.pdon-float-field--icon::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #9ca3af;
    transition: background-color 0.2s ease;
    pointer-events: none;
    z-index: 1;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
/* Push the input text + label right to make room for the icon. */
.pdon-form-card .pdon-float-field--icon input {
    padding-left: 50px;
}
.pdon-float-field--icon label {
    left: 50px;
}
/* Brand purple when the field is focused */
.pdon-float-field--icon:focus-within::before {
    background-color: #732982;
}
/* Slightly darker grey when filled (not focused) */
.pdon-float-field--icon:has(input:not(:placeholder-shown)):not(:focus-within)::before {
    background-color: #6b7280;
}

/* Person silhouette (used for the name field) */
.pdon-float-field--icon-person::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
}

/* Envelope (used for the email field) */
.pdon-float-field--icon-mail::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

/* Checkboxes */
.pdon-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #4b5563;
    margin: 12px 0;
    cursor: pointer;
    line-height: 1.45;
}
.pdon-checkbox input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #732982;
}
.pdon-fee-checkbox {
    background: #faf5fc;
    border-left: 3px solid #732982;
    padding: 12px 14px;
    border-radius: 6px;
    font-weight: 500;
    margin: 16px 0;
}

/* Dedication: custom collapsible with graceful animation.
   Uses the grid-template-rows 0fr→1fr trick to animate to/from auto height
   without needing a fixed max-height value. Supported in all modern browsers. */
.pdon-dedication {
    margin: 16px 0 12px;
}
.pdon-dedication__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 10px 0;
    color: #732982;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}
.pdon-dedication__toggle:hover { color: #5a1e6a; }
.pdon-dedication__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(115, 41, 130, 0.12);
    color: #732982;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.15s ease;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    flex-shrink: 0;
}
.pdon-dedication__toggle:hover .pdon-dedication__icon {
    background: rgba(115, 41, 130, 0.18);
}
/* Rotate the "+" into an "×" when expanded — single-character morph */
.pdon-dedication__toggle[aria-expanded="true"] .pdon-dedication__icon {
    transform: rotate(45deg);
    background: rgba(115, 41, 130, 0.22);
}

.pdon-dedication__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pdon-dedication__panel.is-open {
    grid-template-rows: 1fr;
}
.pdon-dedication__inner {
    overflow: hidden;
    /* Inner padding fades in as the panel opens so content doesn't get
       cramped right at the toggle button. */
    padding-top: 0;
    transition: padding-top 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pdon-dedication__panel.is-open .pdon-dedication__inner {
    padding-top: 8px;
}

/* ============= Panel 3 summary ============= */

.pdon-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #faf5fc 0%, #f3e8ff 100%);
    border: 1px solid #ddd6e8;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pdon-summary:hover, .pdon-summary:focus {
    border-color: #732982;
    box-shadow: 0 2px 8px rgba(115, 41, 130, 0.12);
    outline: none;
}
.pdon-summary__main {
    display: flex; align-items: baseline; gap: 8px;
}
.pdon-summary__amount {
    font-size: 26px;
    font-weight: 800;
    color: #1f0a29;
    line-height: 1;
}
.pdon-summary__interval {
    font-size: 14px;
    color: #6b7280;
    text-transform: lowercase;
}
.pdon-summary__edit {
    font-size: 13px;
    color: #732982;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ============= Stripe Payment Element ============= */

.pdon-payment-group { margin-top: 16px; }
.pdon-payment-element {
    min-height: 80px;
    padding: 12px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
}
.pdon-card-note {
    font-size: 12px;
    color: #9ca3af;
    margin: 8px 0 0;
}

/* ============= Buttons ============= */

.pdon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.pdon-btn--primary {
    background: #732982;
    color: #fff;
}
.pdon-btn--primary:hover {
    background: #5a1e6a;
    box-shadow: 0 6px 14px rgba(115, 41, 130, 0.3);
}
.pdon-btn--ghost {
    background: transparent;
    color: #6b7280;
    padding: 12px 0;
}
.pdon-btn--ghost:hover { color: #732982; }
.pdon-btn--submit {
    display: block;
    width: 100%;
    padding: 16px;
    margin-top: 20px;
    background: linear-gradient(135deg, #732982 0%, #4a1660 100%);
    color: #fff;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.pdon-btn--submit:hover {
    box-shadow: 0 8px 20px rgba(115, 41, 130, 0.35);
}
.pdon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ============= Status + thank-you ============= */

.pdon-form-status {
    margin-top: 12px;
    font-size: 14px;
    text-align: center;
    color: #4b5563;
    min-height: 1.4em;
}
.pdon-form-status.is-error {
    color: #b32d2e;
    background: #fee2e2;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid #b32d2e;
    text-align: left;
}

.pdon-terms {
    margin-top: 14px;
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
    line-height: 1.5;
}

.pdon-thank-you {
    padding: 60px 28px;
    text-align: center;
    color: #1f0a29;
    animation: pdon-fade-in 0.5s ease;
}
.pdon-thank-you__icon {
    font-size: 56px;
    margin-bottom: 12px;
    animation: pdon-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pdon-thank-you h3 { font-size: 28px; margin: 0 0 12px; color: #732982; font-weight: 800; }
.pdon-thank-you p { color: #4b5563; font-size: 15px; line-height: 1.55; }

@keyframes pdon-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pdon-bounce-in {
    0% { opacity: 0; transform: scale(0.5); }
    60% { opacity: 1; transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ============= Reduced motion ============= */

/* ============= Full-width showcase marquee bar ============= */
.pdon-showcase-bar {
    max-width: 1180px;
    margin: 36px auto 32px;
    padding: 0 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.pdon-showcase-bar__header {
    text-align: center;
    margin-bottom: 18px;
}
.pdon-showcase-bar__eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #732982;
    font-weight: 800;
    margin-bottom: 6px;
}
.pdon-showcase-bar__heading {
    margin: 0 !important;
    font-size: 22px;
    color: #1f0a29;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.pdon-showcase-bar__viewport {
    overflow: hidden;
    position: relative;
    /* Fade left & right edges for a polished marquee feel */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.pdon-showcase-bar__track {
    display: flex !important;
    gap: 14px;
    width: max-content;
    animation: pdon-marquee 80s linear infinite;
    will-change: transform;
}
.pdon-showcase-bar:hover .pdon-showcase-bar__track,
.pdon-showcase-bar:focus-within .pdon-showcase-bar__track {
    animation-play-state: paused;
}
@keyframes pdon-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.pdon-showcase-bar a.pdon-showcase-card {
    flex: 0 0 220px !important;
    width: 220px !important;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: #2b0d38;
    background-size: cover;
    background-position: center;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: block !important;
}
.pdon-showcase-bar a.pdon-showcase-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.pdon-showcase-bar a.pdon-showcase-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.15) 65%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
.pdon-showcase-card__caption {
    position: absolute;
    left: 14px; right: 14px; bottom: 14px;
    color: #fff !important;
    z-index: 1;
}
.pdon-showcase-card__date {
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 800;
    margin-bottom: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.pdon-showcase-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
}

@media (max-width: 540px) {
    .pdon-showcase-bar { margin: 24px auto; }
    .pdon-showcase-bar__heading { font-size: 18px; }
    .pdon-showcase-bar a.pdon-showcase-card { flex: 0 0 170px !important; width: 170px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .pdon-panel, .pdon-wizard__viewport, .pdon-btn, .pdon-pill, .pdon-step__num,
    .pdon-thank-you, .pdon-thank-you__icon,
    .pdon-showcase-bar__track {
        transition: none !important;
        animation: none !important;
    }
}

/* ============= Mobile ============= */

@media (max-width: 540px) {
    .pdon-form-card__header { padding: 24px 20px 22px; }
    .pdon-form-card__pictograph { width: 72px; height: 52px; margin-bottom: 12px; }
    .pdon-form-card__heading { font-size: 20px; }
    .pdon-form-card__tagline { font-size: 13px; }
    .pdon-wizard__progress { margin: 14px 20px 0; }
    .pdon-step__label { font-size: 10px; }
    .pdon-panel { padding: 12px 20px 18px; }
    .pdon-pill { padding: 9px 14px; font-size: 14px; }
    .pdon-summary__amount { font-size: 22px; }
}