.p2u-donations {
    --pdn--width: 100%;
    --pdn--color : var(--color-black, #28211F);
    --pdn--accent : var(--color-hope-yellow, #FFC20E);
    --pdn--accent-light : var(--color-accent-yellow-30, #FFEDB7);
    --pdn--line-color: var(--color-accent-black-30, #BEBCBC);
    --pdn--error-color: var(--color-red, #E04E27);
    --pdn--background : var(--color-white, #FFF);;
    --pdn--col-gap: 1rem;
    --pdn--row-gap: 1rem;
    --pdn--iframe-height: 700px;
    --pdn--form-height: 700px;


    border-radius: 0.75rem;
    border: 1px solid var(--pdn--line-color);
    background: var(--color-white, #FFF);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    color : var(--pdn--color);
}

.p2u-donations__form--steps {
    overflow: hidden;
    max-width: 100%;
    width: var(--pdn--width);
    position: relative;
}
.p2u-donations__step {
    position: absolute;
    inset: 0 0 0 0;
    height: 100%;
    transition: translate 250ms ease;
    translate: 100% 0%;
    z-index: 1;
}
.p2u-donations__form--steps > .p2u-donations__step:last-child {
    position: relative;
    z-index: 2;
}
.p2u-donations__step.p2u-donations__step--active {
    translate: 0 0;
}

.p2u-donations__step--content {
    display: flex;
    flex-direction: column;
    gap: var(--pdn--row-gap) var(--pdn--col-gap);
    height: 100%;
    width: var(--pdn--width);
    /* flex-shrink: 0; */
    /* flex-grow: 0; */
}

.p2u-donations__step--content button {
    margin-top: auto;
}

.p2u-donations__address {
    display: flex;
    flex-direction: column;
    gap: var(--pdn--row-gap) var(--pdn--col-gap);
}

.p2u-donations__form-row {
    display: flex;
    gap: var(--pdn--row-gap) var(--pdn--col-gap);
    align-items: stretch;
}

.p2u-donations__input-group {
    width: 100%;
    position: relative;
}


.p2u-donations__step--active {
    /* outline: solid 5px yellow; */
}



.p2u-donations__payment-form {
    min-height: var(--pdn--form-height);
    transition: min-height 150ms ease;
    position: relative;
    z-index: 2;
}

.p2u-donations__loader {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
    background-size: 200% 100%;
    animation: pdn_donations_shimmer 2.5s infinite linear;
    border-radius: 1rem;
    transition: all 150ms ease;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

@keyframes pdn_donations_shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.p2u-donations__loader.active { display: flex; opacity: 1; }
.p2u-donations__loader.active.loaded { opacity: 0; }
.p2u-donations__loader--svg {
    max-width: 5rem;
    width: 100%;

    fill: var(--pdn--accent);
    animation-name: pdn_donations_pulse;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

@keyframes pdn_donations_pulse {
    from {
        scale: 1;
    }
    to {
        scale: 0.6;
    }
    
}
.p2u-donations__iframe-wrap {
    min-height: var(--pdn--form-height);
    transition: min-height 150ms ease;
}
.p2u-donations__iframe-wrap iframe {
    --pdn--form-height : 845px; 
    width: 100%;
    height: 100%;
    min-height: var(--pdn--form-height);
    transition: min-height 150ms ease;
    padding: 0;
    margin: 0;
    pointer-events: auto !important;
}


body .p2u-donations__form--header--title h2 {
    color: currentColor;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 130%;
    text-align: center;
    margin: 0;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
    user-select: none;
    visibility: hidden;

    font-family: var(--font-serif, inherit);
}
.p2u-donations__form--header--title h2:not(:first-child) {
    position: absolute;
    inset: 0 0 0 0;
}

.p2u-donations__form--header--title h2.active {
    opacity: 1;
    pointer-events: all;
    user-select: initial;
    visibility: visible;
}

.p2u-donations__form--header--title {
    position: relative;
    padding-bottom: 1.25rem;
}

.p2u-donations__back-btn {
    background-color: transparent;
    color: rgba(26, 26, 26, 0.65);
    border: none;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 450;
    line-height: 150%; /* 1.125rem */

    display: flex;
    align-items: center;
    border-radius: 0;
    gap: 0.38rem;
    line-height: 1;
    padding: 0.25rem 0.5rem 0.25rem 0;

    position: absolute;
    left: 0;

    opacity: 1;
    transition: opacity 150ms ease;
}
.p2u-donations__back-btn svg {
    display: block;
    width: 0.58725rem;
    height: 0.51138rem;
}
.p2u-donations[data-step-active="0"] .p2u-donations__back-btn { 
    opacity: 0;
}

.p2u-donations__form--header {
    padding-bottom: 1.5rem;
}
.p2u-donations__form--header--progress {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.p2u-donations__form--header--progress--bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}
.p2u-donations__progress--line {
    border-top: 1px solid var(--pdn--line-color);
    width: 1.5rem;
}
.p2u-donations__progress--dot {
    padding: 0.125rem;
    border-radius: 2.5rem;
    border: 1px solid var(--pdn--line-color);
}
.p2u-donations__progress--dot::after {
    content: "";
    display: block;
    padding: 0.25rem;
    border-radius: 2.5rem;
    background-color: white;
    transition: all 150ms ease;
}
.p2u-donations__progress--dot.active::after {
    background-color: var(--pdn--accent);
}

.p2u-donations__dollar-handles {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
} 
.p2u-donations__dollar-handle {
    display: block;
    width: 100%;
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 1.95rem */

    padding: 0.875rem 1rem;
    margin-bottom: 0;
    text-align: center;
    border: 1px solid var(--pdn--line-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 150ms ease;

    outline: 2px solid transparent;
    outline-offset: -2px;

    font-family: var(--font-sans, inherit);
    font-weight: 800;
}
.p2u-donations__dollar-handle input { display: none; }

.p2u-donations__dollar-handle:hover {
    outline: 2px solid var(--pdn--accent);
    outline-offset: -2px;
}

.p2u-donations__dollar-handle svg {
    color: var(--color-khaki-green, #928C34);
}

.p2u-donations.p2u-donations__theme--good-yields .p2u-donations__dollar-handle {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;

    padding-right: 4.5rem;
}
.p2u-donations.p2u-donations__theme--good-yields .p2u-donations__dollar-handle svg {
    width: 2.5rem;
}
.p2u-donations.p2u-donations__theme--good-yields .p2u-donations__dollar-handle span {
    margin-inline: auto;
}

.p2u-donations__dollar-handle:has(input:checked) {
    background-color: var(--pdn--accent-light);
    border-color: var(--pdn--accent);
    outline: 2px solid var(--pdn--accent);
    outline-offset: -2px;
}


.p2u-donations__or {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.p2u-donations__or--line {
    width: 100%;
    border-top: 1px solid var(--pdn--line-color);
}

.p2u-donations__or--text {
    min-width: fit-content;
    font-family: var(--font-sans, inherit);
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-accent-blacok-80, #534D4C);
}

.p2u-donation__input {
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid var(--pdn--line-color);
    padding: 0.95rem 1rem;
    margin-bottom: 0rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 1.4rem */
    transition: all 150ms ease;
    outline: 3px solid transparent;
    outline-offset: -3px;
}
select.p2u-donation__input {
    padding-block: 0.65rem;
    height: 100%;
}

.p2u-donation__input:focus, .p2u-donation__input:active, .p2u-donation__input:focus-within {
    border-color: var(--pdn--accent);
    outline-color: var(--pdn--accent);
}
.p2u-donation__label:has(.p2u-donation__input-checkbox:focus, .p2u-donation__input-checkbox:focus-within, .p2u-donation__input-checkbox:active) {
    background-color: var(--pdn--accent-light);
}
.p2u-donation__label-hidden {
    position: absolute;
    top: 0.875rem;
    left: 1rem;
    overflow: hidden;
    font-family: var(--font-sans);
    opacity : 0;
    pointer-events: none;
    height: 0px;

    transition: all 250ms ease;
}
.p2u-donation__label-hidden[for="other_amount"] { opacity : 0 !important; }

.p2u-donations__input-group:has( .p2u-donation__input:focus) .p2u-donation__label-hidden,
.p2u-donations__input-group:has( .p2u-donation__input:active ) .p2u-donation__label-hidden,
.p2u-donations__input-group:has( .p2u-donation__input:focus-within ) .p2u-donation__label-hidden,
.p2u-donations__input-group:has( input.p2u-donation__input:not(:placeholder-shown) ) .p2u-donation__label-hidden {
    opacity : 0.4;
    top: 0.425rem;
    height: auto;
}
.p2u-donations__input-group:has( .p2u-donation__input:focus) input.p2u-donation__input,
.p2u-donations__input-group:has( .p2u-donation__input:active ) input.p2u-donation__input,
.p2u-donations__input-group:has( .p2u-donation__input:focus-within ) input.p2u-donation__input,
.p2u-donations__input-group:has( .p2u-donation__input:not(:placeholder-shown) ) input.p2u-donation__input {
    padding : calc(0.95rem + 0.425rem) 1rem calc(0.95rem - 0.425rem) 1rem;
}


.p2u-donation__input.p2u-donation__input-checkbox {
    accent-color: var(--pdn--accent);
    width: 1.125rem;
    height: 1.125rem;
    color: white;
    
}
.p2u-donation__label {
    font-size: 0.875rem;
    font-style: normal;
    line-height: 140%;
    font-weight: 400;
    margin-bottom: 0;
    cursor: pointer;
}
.p2u-donation__label-checkbox {
    display: flex;
    gap: 0.5rem;
    padding-block: 0.25rem;
    line-height: 130%;
}

.p2u-donation__input:has(+ .error-message ) {
    border-color: var(--pdn--error-color);
}
.p2u-donations__hr {
    border-top: 1px solid var(--pdn--line-color);
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.p2u-donations .error-message {
    color: var(--pdn--error-color);
    font-size: 0.875rem;
}
.p2u-donations__form-group--checkbox {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.p2u-donations__button {
    width: 100%;
    padding: 0.75rem 1.5rem;
    /*border-radius: 0.25rem;*/
    border-radius: 2rem;

    border: 2px solid var(--pdn--accent);
    background-color: var(--pdn--accent);
    color: var(--color-black);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 1.4rem */
    transition: all 150ms ease;

    cursor: pointer;
    position: relative;
    isolation: isolate;
}
.p2u-donations__button .icon {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    padding-left : 0.5rem;
    opacity: 0;
    transition: all 250ms ease;
}
.p2u-donations__button:hover {
    background-color: var(--pdn--accent-light);
}
.p2u-donations__button:hover .icon {
    opacity: 1;
    translate: 0.5rem -50%;
}

.p2u-donations__input-group--reveal {
    margin-top: 0.75rem;
}
.p2u-donations__input-group--hidden {
    margin-top: -3.25rem;
    position: relative;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    visibility: hidden;
    opacity: 0;
    transition: all 150ms ease;
}
.p2u-donations__input-group--hidden.active {
    margin-top: 0.75rem;
    position: relative;
    z-index: 1;
    pointer-events: all;
    user-select: all;
    visibility: visible;
    opacity: 1;
}
.p2u-donations__input-group:has( + .p2u-donations__input-group--reveal) {
    position: relative;
    z-index: 1;
}

#group_checkboxIsCompany:has( input:checked ) .p2u-donations__input-group--reveal.p2u-donations__input-group--hidden {
    margin-top: 0.75rem;
    position: relative;
    z-index: 1;
    pointer-events: all;
    user-select: all;
    visibility: visible;
    opacity: 1;
}
body .p2u-donations__theme--good-yields .p2u-donations__form--header--title h2 {
    font-family: var(--font-sans);
    text-align: center;
    text-wrap: balance;
    font-weight: 800;
}
body .p2u-donations__good-yield h5 {
    font-family: var(--font-sans);
    text-align: center;
    text-wrap: balance;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 800;
    line-height: 140%; /* 1.75rem */
    margin-bottom: 0.625rem;
    margin-top: 0;
}
body  .p2u-donations__good-yield p {
    text-align: center;
    text-wrap: balance;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 1.4rem */
    margin-inline: auto;
    max-width: 100%;
    font-family: var(--font-sans);
}

.p2u-donations__good-yields--group {
    margin-top: 1.5rem;
    position: relative;
}
.p2u-donations__good-yield {
    width: 100%;
    opacity: 0;
    translate: 0rem 2rem;
    transition: all 150ms ease;
}
.p2u-donations__good-yield:not(:last-child) {
    position: absolute;
    top: 0;
}
.p2u-donations__good-yield.active {
    opacity: 1;
    translate: 0rem 0rem;
}

.p2u-donation__input-other_amount { 
    position: relative; 
    display: block; 
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1.625rem;
}
.p2u-donation__input-other_amount::before {
    content: '$';
    position: absolute;
    z-index: 1;
    top: 50%;
    translate: 0 -50%;
    left: 1rem;
    font-size: inherit;
    font-weight: 800;
    font-family: inherit;
}
.p2u-donation__input-other_amount::after {
    content: '.00';
    position: absolute;
    z-index: 1;
    top: 50%;
    translate: 0 -50%;
    right: 1rem;
    font-size: inherit;
    font-weight: 800;
    font-family: inherit;
}
.p2u-donation__input-other_amount::before,
.p2u-donation__input-other_amount::after {
    opacity: 0.7;
}
.p2u-donation__input-other_amount:has( .p2u-donation__input:focus-within )::before,
.p2u-donation__input-other_amount:has( .p2u-donation__input:focus-within )::after,
.p2u-donation__input-other_amount:has( .p2u-donation__input:not(:placeholder-shown) )::before,
.p2u-donation__input-other_amount:has( .p2u-donation__input:not(:placeholder-shown) )::after {
    opacity: 1;
}

.p2u-donation__input-other_amount .p2u-donation__input { 
    text-align: right;
    padding-left: 2rem !important;
    padding-right: 3.75rem !important;
    padding-block: 0.95rem !important;
    font-size: inherit;
    -moz-appearance: textfield;
    font-family: inherit;
    font-weight: 800;
    position: relative;
}
.p2u-donation__input-other_amount .p2u-donation__input::placeholder {
    font-weight: 400;
    opacity: 0.6;
    text-align: left;
    padding-left: 1rem;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
}
.p2u-donation__input-other_amount .p2u-donation__input:not(:placeholder-shown) {
    outline: var(--pdn--accent) 1px solid;
    outline-offset: -1px;
}

.p2u-donation__input-other_amount--text {
    color : var(--color-accent-black-70);
    font-family: var(--font-sans, inherit);
    letter-spacing: -0.00875rem;
    font-size: 0.875rem;
    display: block;
    padding-top: 0.38rem;
}

.p2u-donation__input-other_amount .p2u-donation__input::-webkit-outer-spin-button,
.p2u-donation__input-other_amount .p2u-donation__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.p2u-donations__step--content:has( #other_amount:not(:placeholder-shown) ) .p2u-donations__dollar-handle {
    opacity: 0.4;
}

.p2u-donations__mini .p2u-donations__dollar-handles,
.p2u-donations__mini .p2u-donations__or { display: none; }
.p2u-donations__mini .p2u-donations__good-yields--group { display: none;}