/* BECOME A MEMBER & DONATE & GUIDE */
.form--membership,
.form--donation {
    background-color: var(--color-white);
    color: var(--color-black);
}

.form--donation[data-donation-type="milestone"] *[data-donation-type]:not([data-donation-type="milestone"]),
.form--donation[data-donation-type="custom"] *[data-donation-type],
.form--donation:not([data-donation-type="milestone"]) .donation-milestone-container .button-reset,
.form--donation:not([data-donation-type="custom"]) .input-amount-container {
    display: none;
}

.form--donation:not([data-donation-type="milestone"]) .donation-milestone-container .button-reset,
.form--donation:not([data-donation-type="milestone"]) .milestone-extra-text-container
{
    display: none;
}

.form--donation[data-donation-type="milestone"] .donation-milestone-container .donation {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.radio-virtual__box__content,
.radio-virtual--donation,
.donation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: var(--transition);
    border: 1px solid var(--color-black);
    border-radius: var(--border-radius-small);
    padding: calc(var(--spacing-default) / 1.5) calc(var(--spacing-default) * 1.5);
    width: 100%;
    text-align: center;
    cursor: pointer;
}

/* iOS Safari: .radio-virtual is inline-flex (shrink-to-fit) and __box is a
   flex item that shrink-wraps, so __content width:100% collapses to content
   width. Force the label + box to fill the cell. */
.radio-virtual:has(.radio-virtual__box),
.radio-virtual__box {
    width: 100%;
}

.radio-virtual--donation:has(input[type="radio"]:checked),
input[type="radio"]:checked~.radio-virtual__box .radio-virtual__box__content {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.button-reset {
    position: absolute;
    right: calc(var(--spacing-default) / 1.25);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--unit-20);
    height: var(--unit-20);
    background-color: rgba(var(--color-white-rgb), .9);
    box-shadow: var(--box-shadow-grey-dark);
    border-radius: 50%;
    transition: var(--transition);
}

.button-reset svg {
    color: var(--color-primary);
    width: 50%;
    height: 50%;
}

.donation-options:has(*[data-field-invalid]) .radio-virtual--donation,
.donation-options:has(*[data-field-invalid]) .donation,
.membership-subscriptions:has(*[data-field-invalid]) .radio-virtual--subscription .radio-virtual__box__content
{
    border-color: var(--color-error) !important;
    animation: shake 500ms linear;
}


/* BECOME A MEMBER ONLY */
.radio-virtual__box__top {
    background-color: #4AA135;
    border-top-left-radius: var(--unit-8);
    border-top-right-radius: var(--unit-8);
}

.radio-virtual__box__top+.radio-virtual__box__content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* END BECOME A MEMBER ONLY */

/* LARGE ONLY */
@media (min-width: 64rem) {
    .button-reset {
        opacity: .5;
    }

    .button-reset:hover {
        opacity: 1;
    }

    .radio-virtual__box:hover .radio-virtual__box__content,
    .radio-virtual--donation:hover,
    .donation:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

    .form--donation[data-donation-type="milestone"] .donation-milestone-container {
        --large-column: 12 !important;
    }
}

/* END LARGE ONLY */

/*SMALL ONLY*/
@media (max-width: 63.9375rem) {
    .form--donation[data-donation-type="milestone"] .donation-milestone-container {
       width: 100% !important;
    }
}

/* END SMALL ONLY */
/* END BECOME A MEMBER & DONATE & GUIDE */