﻿.cbf-legacy-giving {
    width: 100%;
}

.cbf-legacy-giving h1,
.cbf-legacy-giving h2,
.cbf-legacy-giving h3,
.cbf-legacy-giving p {
    margin: 0 !important;
}

.cbf-legacy-giving .container-fluid {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.cbf-legacy-giving .content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px;
}

.cbf-legacy-giving .title > h1,
.cbf-legacy-giving .title > p,
.cbf-legacy-giving .title > a {
    text-align: center;
}

.cbf-legacy-giving .title > a {
    display: block;
}

.cbf-legacy-giving .how-it-works {
    display: flex;
    flex-direction: column;
}

.cbf-legacy-giving .how-it-works .steps {
    display: flex;
    flex-direction: column;
}

.cbf-legacy-giving .how-it-works .steps p {
    margin: 0 !important;
}

.cbf-legacy-giving .how-it-works .steps p .step-number {
    color: var(--cbf-purple-1000);
}

.cbf-legacy-giving .form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cbf-legacy-giving .form > .title {
    text-align: center;
}

.cbf-legacy-giving .form #donation-details,
.cbf-legacy-giving .form #donor-tax-receipt-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cbf-legacy-giving .form #donation-details .title,
.cbf-legacy-giving .form #donor-tax-receipt-details .title {
    background-color: var(--cbf-gold-1000);
    padding: 8px 16px;
}

.cbf-legacy-giving .form #donation-details .form-group-radio {
    display: flex;
    flex-direction: row;    
}

.cbf-legacy-giving .form #donation-details .radio-button {
    flex-shrink: 0;
    flex-grow: 1;
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: var(--cbf-white-1000);
    color: var(--cbf-black-1000);
    border: 1px solid rgb(234,236,241);
    position: relative;
}

.cbf-legacy-giving .form #donation-details .radio-button input[type=radio] {
    opacity: 0;
}

.cbf-legacy-giving .form #donation-details .radio-button:has(input[type=radio]:checked) {
    background-color: var(--cbf-purple-1000);
    color: var(--cbf-white-1000);
}

.cbf-legacy-giving .form #donation-details .radio-button label {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.cbf-legacy-giving .form .actions {
    display: flex;
    justify-content: center;
}

@media(min-width: 800px) {

    .cbf-legacy-giving .how-it-works .steps {
        flex-direction: row;
        gap: 32px;
    }

}

.ui-menu {
    list-style-type: none;
    z-index: 9999;
    background-color: var(--cbf-white-1000);
    color: var(--cbf-black-1000);
    margin: 0 !important;
    max-width: 450px !important;
}

.ui-menu li {
    padding: 10px;
}

.ui-menu li:hover {
    background-color: var(--cbf-purple-800);
    color: var(--cbf-black-1000);
    cursor: pointer;
}