

uix-donate-form-receipt-request {
    & {
        .receipt-request-container {
            scroll-margin-top: 20px;
            position: absolute;
            top: 20px;
            max-width: 1200px;
            width: 100%;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid var(--unyt-border-primary);
            background-color: var(--unyt-bg-secondary);
    
            form {
                display: flex;
                flex-direction: column;
                gap: 16px;
    
                fieldset {
                    display: flex;
                    border: none;
                    gap: 10px;
                    width: 100%;
                    flex-wrap: wrap;
                    padding: 0;
                    margin: 0;
    
                    legend {
                        font-size: larger;
                        font-weight: 500;
                    }
    
                    label {
                        padding: 8px 2px 0;
                        cursor: pointer;
    
                        input[type="checkbox"] {
                            cursor: pointer;
                            width: 14px;
                            height: 14px;
                            accent-color: #2baad6;
                            margin: 0 6px 0 0;
                            pointer-events: all;
                        }
                    }
    
                    > div {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        gap: 14px;
    
                        .donor-organization-details {
                            margin-bottom: 8px;
                        }
                    }
                }
            }
        }
    
        .back-button {
            margin-bottom: 8px;
            border: none;
            background-color: transparent;
            font-size: 16px;
            color: var(--color-text-secondary);
            padding-left: 0;
    
            &:hover {
                cursor: pointer;
                color: var(--color-text-primary);
            }
    
            display: flex;
            
            align-items: center;
    
            > .arrow {
                min-width: 14px;
                margin-right: 4px;
                transition: transform 200ms;
                transform: translateX(0);
                transform: scaleX(-1) translateX(0);
                .part {
                    transition: opacity 200ms, transform 200ms;
                    transform: translateX(4px);
                    opacity: 0;
                }
            }
    
            &:hover {
                > .arrow {
                    transform: scaleX(-1) translateX(3px);
                    .part {
                        opacity: 1;
                        transform: translateX(-2px);
                    }
                }
            }
        }
    
        .floating-select-container {
            position: relative;
            display: flex;
            padding: 0px 0px;
            border: 1px solid var(--unyt-border-primary);
            width: 100%;
            height: 50px;
            background-color: var(--unyt-bg-controls);
            border-radius: 8px;
            color: var(--unyt-text-primary, #ffffff);
    
            &::after {
                position: absolute;
                background-color: transparent;
                transform: translateY(-50%);
                right: 12px;
                top: 50%;
                z-index: 100;
                content: "▾";
                font-size: 24px;
                color: rgb(117, 117, 117);
                pointer-events: none;
            }
    
            option {
                color: var(--unyt-text-primary, #ffffff);
    
                &:first-child {
                    color: grey;
                }
            }
    
            &:has(option[value=""]:checked) {
                color: rgb(117, 117, 117);
            }
    
            select {
                width: 100%;
                border: none;
                outline: none;
                background-color: var(--unyt-bg-controls);
                height: 100%;
                border-radius: 8px;
                padding: 18px 11px 4px;
                font-size: medium;
    
                &:focus {
                    box-shadow: 0 0 0 0.0625rem var(--unyt-border-primary) inset;
                }
            }
    
            > span {
                position: absolute;
                font-size: small;
                margin-top: 6px;
                margin-left: 11px;
                opacity: 0.8;
                transition: opacity 0.2s, transform 0.2s;
                transform: translateY(0);
            }
    
            &:has(option[value=""]:checked) {
                > select {
                    padding-top: 11px;
                    padding-bottom: 11px;
                }
    
                > span {
                    transform: translateY(-5px);
                    opacity: 0;
                }
            }
        }
    
        .description-text {
            margin-top: 8px;
            margin-bottom: 16px;
        }
    
        .description-text.details {
            margin-bottom: 8px;
        }
    
        .download-link {
            border: 2px solid white;
            border-color: var(--color-text-primary);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--color-text-primary);
            width: 100%;
            height: 50px;
            text-align: center;
            text-decoration: none;
    
            &:hover {
                &:not([disabled]) {
                    filter: brightness(0.8);
                }
            }
        }
    }
    
}
