uix-donate-form-payment {
    & {
        > div {
            scroll-margin-top: 20px;
            margin-top: 20px;
            width: 100%;
            max-width: 1200px;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid var(--unyt-border-primary);
            background-color: var(--unyt-bg-secondary);
            @media (min-width: 1200px) {
                margin-top: 20px;
            }
            > form {
                display: flex;
                flex-direction: column;
                gap: 30px;
                h1, & h2, & h3 {
                    margin-top: 0;
                }
                h2, legend {
                    font-size: larger;
                    font-weight: 400;
                }
                fieldset {
                    display: flex;
                    border: none;
                    gap: 10px;
                    width: 100%;
                    flex-wrap: wrap;
                    padding: 0;
                    margin: 0;
    
                    > label {
                        cursor: pointer;
                        height: 48px;
                        flex: 1 0 130px;
                        background-color: var(--unyt-bg-controls);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 16px 0;
                        border: 2px solid transparent;
                        border-radius: 8px;
                        opacity: 0.5;
                        &:has(input:checked) {
                            opacity: 1;
                            border-color: var(--unyt-bg-invert);
                        }
                        @media (min-width: 1100px) {
                            flex-basis: 30%;
                        }
                        input[type="radio"] {
                            margin: 0;
                            padding: 0;
                        }
                    }
                }
                .donation-amounts {
                    padding: 0;
                }
                .donation-frequency {
                    width: 100%;
                    display: flex;
                    
                    > label {
                        @media (min-width: 500px) {
                            flex-basis: 45%;
                        }
                    }
                }
                
                .payment-method {
                    > label {
                        @media (max-width: 530px) {
                            flex-basis: 100%;
                        }
                    }
                }
    
                
                .input-container {
                    position: relative;
                    height: 52px !important;
                }
    
                .us-format {
                    padding-left: 24px;
                }
    
                .input-container:has(.eu-format) {
                    justify-content: flex-end;
    
                    span {
                        margin-right: 11px;
                        text-align: right;
                    }
                }
    
                .input-container:has(.us-format)::before {
                    opacity: 0;
                    content: "€";
                    font-size: medium;
                    position: absolute;
                    top: 41%;
                    pointer-events: none;
                    color: var(--color-text-secondary);
                    margin-left: 11px;
                }
    
                .input-container:has(.eu-format)::after {
                    opacity: 0;
                    content: "€";
                    font-size: medium;
                    position: absolute;
                    top: 41%;
                    pointer-events: none;
                    color: var(--color-text-secondary);
                    margin-right: 11px;
                }
    
                .input-container:has(
                    .us-format:not(:placeholder-shown)
                )::before {
                    opacity: 1;
                }
    
                .input-container:has(
                    .eu-format:not(:placeholder-shown)
                )::after {
                    opacity: 1;
                }
    
                .input-container {
                    .eu-format {
                        text-align: right;
                        padding-right: 24px;
                    }
    
                    .custom-amount:invalid:not(:placeholder-shown) {
                        border-color: var(--unyt-light-border-invalid);
                    }
    
                    &:has(
                        .custom-amount:invalid:not(:placeholder-shown)
                    ) {
                        span {
                            color: var(--unyt-light-border-invalid);
                        }
                    }
                }
    
                .input-container:has(.custom-amount:not(:placeholder-shown)) {
                    border: 2px solid transparent;
                    border-color: var(--unyt-bg-invert);
                }
    
                .input-container:has(
                    .custom-amount:invalid:not(:placeholder-shown)
                ) {
                    border-color: var(--unyt-light-border-invalid);
                }
                
            }
        }
    }
    
}