.feedback-form-section {
    padding-top: var(--spacing-large);
    padding-bottom: var(--spacing-xlarge);

    .accordion-item {
        --accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23404040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
        --accordion-btn-icon-transition: transform 0.2s ease-in-out;

        .form-feedback-button {
            display: flex;
            padding: var(--spacing-xxsmall, 8px) var(--spacing-xsmall, 12px);
            justify-content: center;
            align-items: center;
            gap: var(--spacing-xsmall, 12px);
            border: 2px solid var(--color-primary-500, #007FC1);
            width: auto;
            line-height: normal;

            &.accordion-button::after {
                flex-shrink: 0;
                margin-left: auto;
                content: "";
                background-image: var(--accordion-btn-icon);
                background-repeat: no-repeat;
                background-size: 0.75rem;
                height: 0.75rem;
                width: 0.75rem;
                transition: var(--accordion-btn-icon-transition);
            }

            &.accordion-button:not(.collapsed)::after {
                background-image: var(--accordion-btn-icon);
                transform: rotate(-180deg);
            }

            @media (max-width: 768px) {
                width: 100%;

                &.accordion-button::before {
                    content: "";
                    flex-shrink: 0;
                    margin-right: auto;
                    height: 0.75rem;
                    width: 0.75rem;
                }
            }
        }

            .form-feedback-button:focus-visible {
                border: none;
                background-color: var(--color-focus-state);
                border-bottom: 3px solid var(--color-black);
            }
    }


    .umbraco-forms-page {
        display: flex;
        padding: var(--spacing-small, 16px) 0;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-medium, 24px);
        align-self: stretch;
    }

    .umbraco-forms-container {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-medium, 24px);

        > * {
            width: 100%;
        }
    }


    .umbraco-forms-legend, .umbraco-forms-label {
        font-family: Aptos;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        margin: 0px;
    }

    .umbraco-forms-field {
        display: flex;
        gap: var(--spacing-xsmall);
        flex-direction: column;
    }

    .umbraco-forms-hidden {
        display: none;
    }

    .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper, .checkboxlist, .radiobuttonlist {
        width: fit-content;
        display: flex;
        padding: 0;
        align-self: stretch;
        gap: var(--spacing-xsmall, 12px);

        div {
            display: flex;
            align-items: center;
            gap: var(--spacing-xsmall);
        }
    }

    .radiobuttonlist, .checkboxlist {
        flex-direction: column;
    }

    input[type="radio"] {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 50%;
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        border: 2px solid currentColor;
        background: white;
    }

        input[type="radio"]:checked {
            background: radial-gradient( circle, var(--color-black) 40%, white 40%, white 55%, transparent 55% );
        }

    input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 0;
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        border: 2px solid currentColor;
        background: white;
        position: relative;
        align-self: center;
    }

        input[type="checkbox"]:checked {
        }

            input[type="checkbox"]:checked::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 45%;
                transform: translate(-50%, -50%) rotate(45deg);
                width: 35%;
                height: 60%;
                border-right: 2px solid var(--color-black);
                border-bottom: 2px solid var(--color-black);
            }

        input[type="radio"]:focus-visible,
        input[type="checkbox"]:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--color-focus-state);
        }


    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid var(--color-grey-500, #888);
        padding: var(--spacing-xsmall) calc(var(--spacing-xsmall) + 0.75rem + var(--spacing-xsmall)) var(--spacing-xsmall) var(--spacing-xxsmall);
        background-image: var(--accordion-btn-icon);
        background-repeat: no-repeat;
        background-position: right var(--spacing-xsmall) center;
        background-size: 0.75rem 0.75rem;
    }

        select::-ms-expand {
            display: none;
        }

        select:focus-visible {
            border: none;
            box-shadow: 0 0 0 3px var(--color-black), 0 0 0 6px var(--color-focus-state);
            outline: none;
        }

    .umbraco-forms-field.name,
    .umbraco-forms-field.email {
        display: flex;
        flex-direction: column;
        width: calc(50% - 16px);
        box-sizing: border-box;
        flex-grow: 1;
    }

    .umbraco-forms-field.name {
        padding-right: 16px;
    }

    .umbraco-forms-field.email {
        padding-left: 16px;
    }

        .umbraco-forms-field.name input,
        .umbraco-forms-field.email input {
            width: 100%;
            box-sizing: border-box;
            height: fit-content;
        }

    textarea, .text {
        border: 1px solid var(--color-grey-500, #888);
        width: 100%;
        height: 150px;
        padding: var(--spacing-xsmall) var(--spacing-xxsmall);
    }

        textarea:focus-visible, .text:focus-visible {
            border: none;
            box-shadow: 0 0 0 3px var(--color-black), 0 0 0 6px var(--color-focus-state);
            outline: none;
        }

    div:has(> .umbraco-forms-submitmessage) {
        padding-top: var(--spacing-small);
    }

    .btn {
        display: inline-flex;
        padding: var(--spacing-xxsmall) var(--spacing-small);
        justify-content: center;
        align-items: center;
        gap: var(--spacing-xxsmall);
        border: 2px solid var(--color-primary-500);
        background: var(--color-white);
        width: auto;
        color: var(--color-black);
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 0px;
    }

        .btn:hover {
            border: 2px solid var(--color-primary-800);
            color: var(--color-black);
            text-decoration: none;
        }

        .btn:focus-visible {
            border: none;
            background-color: var(--color-focus-state);
            border: 3px solid var(--color-black);
            box-shadow: none;
        }
}

.master-form {
    padding: 0 var(--page-side-spacing);
}

.umbraco-forms-form.umbraco-forms-form .field-validation-error,
.umbraco-forms-form.umbraco-forms-form span.contourError,
.umbraco-forms-form.umbraco-forms-form .umbraco-forms-field-error {
    color: var(--color-error) !important;
}