.wc-donation-platform {
    --label-inactive: #F0F0F0;
    --label-inactive-hover: #C3C3C3;
    --orange-color: #CC9610;
    --blue-color: #2E3C6B;

    .wcdp-progress-bar {
        --wcdp-main-2: var(--blue-color);
        margin-top: -3px;
    }

    .wcdp-progress-bar,
    .wcdp-progress-bar-background {
        top: 1.4em;
        height: 3px;
    }

    .wcdp-header {
        height: calc(6em + 20px);

        > .wcdp-step {
            font-size: 14px;
            font-weight: 600;

            &::before {
                width: 40px;
                height: 40px;
                line-height: 40px;
            }
        }
    }

    .wcdp-variation-heading {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.1;
        margin-bottom: 30px;
    }

    .wcdp_options {
        gap: 22px;

        & > li {
            > label {
                font-size: 16px;
                font-weight: 500;
                border-radius: 8px;
                padding: 18px;
                border: 1px solid var(--label-inactive-hover);
            }

            > input:checked + label {
                --wcdp-main-2: var(--orange-color);
                border-color: var(--wcdp-main-2);
            }
        }
    }

    .wcdp-row {
        margin-bottom: 48px;
    }

    .button.wcdp-button {
        background-color: var(--blue-color);
        font-size: 14px;
        font-weight: 600;
        color: #FFF;
        padding: 15px 40px;
        border-radius: 30px;

        &:hover{
            background-color: var(--label-inactive-hover);
            color: #000;
        }

        &.wcdp-right {
            float: right;
        }
    }
}

@media screen and (max-width: 480px) {
    .wcdp_amount{
        grid-template-columns: 1fr 1fr;
    }
}